update frontend dependencies (#2397)

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

frontend/taipy-gui/dom/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "taipy-gui-dom",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "taipy-gui-dom",
-      "version": "4.0.0",
+      "version": "4.1.0",
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -14,8 +14,7 @@
       }
     },
     "../packaging": {
-      "name": "taipy-gui",
-      "version": "4.0.0"
+      "version": "4.1.0"
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
@@ -34,9 +33,9 @@
       }
     },
     "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -45,21 +44,21 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.1"
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       }

frontend/taipy-gui/package.json

@@ -12,20 +12,20 @@
     "apache-arrow": "^16.1.0",
     "axios": "^1.2.0",
     "better-react-mathjax": "^2.0.3",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
     "date-fns-tz": "^3.1.3",
     "lodash": "^4.17.21",
     "nanoid": "^5.0.7",
     "notistack": "^3.0.0",
     "plotly.js": "^2.33.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-error-boundary": "^5.0.0",
     "react-helmet-async": "^2.0.1",
     "react-jsx-parser": "^2.1.0",
     "react-markdown": "^9.0.1",
     "react-plotly.js": "^2.5.1",
-    "react-router-dom": "^6.0.1",
+    "react-router": "^7.1.1",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.6",
     "react-window-infinite-loader": "^1.0.7",
@@ -81,10 +81,10 @@
     "@types/css-mediaquery": "^0.1.1",
     "@types/jest": "^29.0.1",
     "@types/lodash": "^4.14.177",
-    "@types/react": "^18.0.18",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@types/react-plotly.js": "^2.5.0",
-    "@types/react-router-dom": "^5.3.2",
+    "@types/react-router": "^5.1.20",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "@types/react-window-infinite-loader": "^1.0.5",
@@ -99,10 +99,10 @@
     "css-mediaquery": "^0.1.2",
     "dotenv-webpack": "^8.0.0",
     "dts-bundle-generator": "^7.2.0",
-    "eslint": "^8.57.0",
+    "eslint": "^9.18.0",
     "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-tsdoc": "^0.3.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-tsdoc": "^0.4.0",
     "eslint-webpack-plugin": "^4.0.0",
     "generate-json-webpack-plugin": "^2.0.0",
     "html-webpack-plugin": "^5.5.0",
@@ -120,6 +120,6 @@
     "typedoc-plugin-markdown": "^4.3.2",
     "typescript": "^5.7.2",
     "webpack": "^5.61.0",
-    "webpack-cli": "^5.0.0"
+    "webpack-cli": "^6.0.1"
   }
 }

frontend/taipy-gui/src/components/Router.tsx

@@ -21,7 +21,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
 import { SnackbarProvider } from "notistack";
 import { HelmetProvider } from "react-helmet-async";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router";
 import { ErrorBoundary } from "react-error-boundary";
 
 import { PageContext, TaipyContext } from "../context/taipyContext";

frontend/taipy-gui/src/components/Taipy/Dialog.spec.tsx

@@ -28,8 +28,8 @@ const mockedAxios = axios as jest.Mocked<typeof axios>;
 mockedAxios.get.mockRejectedValue("Network error: Something went wrong");
 mockedAxios.get.mockResolvedValue({ data: { jsx_no: '<div key="mock" data-testid="mocked"></div>' } });
 
-jest.mock("react-router-dom", () => ({
-    ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+    ...jest.requireActual("react-router"),
     useLocation: () => ({
         pathname: "pathname",
     }),

frontend/taipy-gui/src/components/Taipy/Link.spec.tsx

@@ -14,7 +14,7 @@
 import React from "react";
 import { render } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from "react-router";
 
 import Link from "./Link";
 import { INITIAL_STATE, TaipyState } from "../../context/taipyReducers";

frontend/taipy-gui/src/components/Taipy/Link.tsx

@@ -12,7 +12,7 @@
  */
 
 import React, { ReactNode, useContext, useMemo } from "react";
-import { Link as RouterLink, useMatch, useResolvedPath } from "react-router-dom";
+import { Link as RouterLink, useMatch, useResolvedPath } from "react-router";
 import MuiLink from "@mui/material/Link";
 import { TaipyContext } from "../../context/taipyContext";
 

frontend/taipy-gui/src/components/Taipy/NavBar.spec.tsx

@@ -15,7 +15,7 @@ import React from "react";
 import {render} from "@testing-library/react";
 import "@testing-library/jest-dom";
 import userEvent from "@testing-library/user-event";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from "react-router";
 
 import NavBar from './NavBar';
 import { LoV } from "./lovUtils";

frontend/taipy-gui/src/components/Taipy/Navigate.tsx

@@ -13,7 +13,7 @@
 
 import { useContext, useEffect } from "react";
 import axios from "axios";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router";
 
 import { TaipyContext } from "../../context/taipyContext";
 import { createNavigateAction } from "../../context/taipyReducers";
@@ -49,7 +49,8 @@ const Navigate = ({ to, params, tab, force }: NavigateProps) => {
             const reloadAll = params?.tp_reload_all === "true";
             const reloadSameRouteOnly = params?.tp_reload_same_route_only === "true";
             if (reloadAll) {
-                return navigate(0);
+                navigate(0);
+                return;
             }
             if (reloadSameRouteOnly) {
                 if (location.pathname === tos) {

frontend/taipy-gui/src/components/Taipy/Pane.spec.tsx

@@ -28,8 +28,8 @@ const mockedAxios = axios as jest.Mocked<typeof axios>;
 mockedAxios.get.mockRejectedValue("Network error: Something went wrong");
 mockedAxios.get.mockResolvedValue({ data: { jsx_no: '<div key="mock" data-testid="mocked"></div>' } });
 
-jest.mock("react-router-dom", () => ({
-    ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+    ...jest.requireActual("react-router"),
     useLocation: () => ({
         pathname: "pathname",
     }),

frontend/taipy-gui/src/components/Taipy/TaipyStyle.tsx

@@ -29,7 +29,7 @@ interface TaipyStyleProps {
 export const getComponentClassName = (children: ReactNode) =>
     (
         React.Children.map(children, (element) =>
-            React.isValidElement(element) && element.type == TaipyStyle ? element.props.className : undefined
+            React.isValidElement(element) && element.type == TaipyStyle ? (element.props as Record<string, unknown>).className : undefined
         )?.filter((v) => v) || []
     ).join(" ");
 

frontend/taipy-gui/src/components/Taipy/index.ts

@@ -46,7 +46,7 @@ import Toggle from "./Toggle";
 import TimeSelector from "./TimeSelector";
 import TreeView from "./TreeView";
 
-const registeredComponents: Record<string, ComponentType> = {};
+const registeredComponents: Record<string, ComponentType<object>> = {};
 
 export const getRegisteredComponents = () => {
     if (registeredComponents.TreeView === undefined) {
@@ -106,5 +106,5 @@ export const getRegisteredComponents = () => {
             });
         }
     }
-    return registeredComponents;
+    return registeredComponents  as Record<string, ComponentType<object>>;
 };

frontend/taipy-gui/src/components/pages/MainPage.tsx

@@ -12,7 +12,7 @@
  */
 
 import React, { useEffect } from "react";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router";
 
 import TaipyRendered from "./TaipyRendered";
 import { getBaseURL } from "../../utils";

frontend/taipy-gui/src/components/pages/PageContent.tsx

@@ -12,7 +12,7 @@
  */
 
 import React from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 
 const PageContent = () => <Outlet />;
 

frontend/taipy-gui/src/components/pages/TaipyRendered.tsx

@@ -11,12 +11,12 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, { ComponentType, useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import axios from "axios";
 import { ErrorBoundary } from "react-error-boundary";
 import { Helmet } from "react-helmet-async";
 import JsxParser from "react-jsx-parser";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 import { PageContext, TaipyContext } from "../../context/taipyContext";
 import { createPartialAction } from "../../context/taipyReducers";
@@ -140,7 +140,7 @@ const TaipyRendered = (props: TaipyRenderedProps) => {
                 <JsxParser
                     disableKeyGeneration={true}
                     bindings={state.data}
-                    components={getRegisteredComponents() as Record<string, ComponentType>}
+                    components={getRegisteredComponents()}
                     jsx={pageState.jsx}
                     renderUnrecognized={unregisteredRender}
                     allowUnknownElements={false}

frontend/taipy-gui/src/utils/hooks.ts

@@ -191,7 +191,7 @@ export const useWhyDidYouUpdate = (name: string, props: Record<string, unknown>)
     });
 };
 
-export const useElementVisible = (ref: RefObject<HTMLElement>) => {
+export const useElementVisible = (ref: RefObject<HTMLElement | null>) => {
     const observerRef = useRef<IntersectionObserver | null>(null);
     const [isOnScreen, setIsOnScreen] = useState(false);
 

frontend/taipy/package.json

@@ -13,10 +13,10 @@
     "child_process": "^1.0.2",
     "cross-env": "^7.0.3",
     "dotenv": "^16.4.5",
-    "eslint": "^8.20.0",
+    "eslint": "^9.18.0",
     "eslint-plugin-react": "^7.30.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-tsdoc": "^0.3.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-tsdoc": "^0.4.0",
     "eslint-webpack-plugin": "^4.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -24,7 +24,7 @@
     "ts-loader": "^9.3.1",
     "typescript": "^5.0.2",
     "webpack": "^5.74.0",
-    "webpack-cli": "^5.0.1"
+    "webpack-cli": "^6.0.1"
   },
   "dependencies": {
     "@emotion/react": "^11.10.6",
@@ -39,7 +39,8 @@
     "fast-deep-equal": "^3.1.3",
     "formik": "^2.2.9",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "taipy-gui": "file:../../taipy/gui/webapp"
   },
   "scripts": {
     "postinstall": "node scripts/install.js",