Bump react and types 1959

package.json

@@ -27,6 +27,7 @@
 		"comlink": "^4.4.2",
 		"command-exists": "^1.2.9",
 		"convert-units": "^3.0.0-beta.7",
+		"copy-to-clipboard": "^3.3.3",
 		"date-fns": "^4.1.0",
 		"glob": "^11.0.0",
 		"jsroot": "^7.8.2",
@@ -36,12 +37,11 @@
 		"notistack": "^3.0.2",
 		"object-hash": "^3.0.0",
 		"pyodide": "^0.27.4",
-		"react": "^18.3.1",
+		"react": "^19.1.0",
 		"react-async-script": "^1.2.0",
-		"react-copy-to-clipboard": "^5.1.0",
 		"react-countdown": "^2.3.6",
 		"react-dnd": "^16.0.1",
-		"react-dom": "^18.3.1",
+		"react-dom": "^19.1.0",
 		"react-hooks-visible": "^1.1.1",
 		"react-scripts": "5.0.1",
 		"set-interval-async": "^3.0.3",
@@ -206,10 +206,9 @@
 	},
 	"devDependencies": {
 		"@total-typescript/ts-reset": "^0.6.1",
+		"@types/react": "^19.1.2",
 		"@types/node": "^22.14.1",
-		"@types/react": "^18.3.13",
 		"@types/react-async-script": "^1.2.5",
-		"@types/react-copy-to-clipboard": "^5.0.7",
 		"@types/selenium-webdriver": "^4.1.28",
 		"@types/three": "^0.175.0",
 		"cross-env": "^7.0.3",

src/JsRoot/hook/useJsRootCanvas.tsx

@@ -13,7 +13,7 @@ export const useJsRootCanvas = (redrawParam: string) => {
 	const [isVisible, setIsVisible] = useState(false);
 	const visibleRef = useRef(isVisible);
 	const { width: resizeWidth, height: resizeHeight } = useResizeObserver({
-		ref: containerEl
+		ref: containerEl as React.RefObject<HTMLDivElement>
 	});
 
 	useEffect(() => {

src/PythonConverter/PythonConverterService.tsx

@@ -37,7 +37,7 @@ const PYODIDE_LOADED = 'PYODIDE_LOADED';
  *	There can be only one instance of PythonConverter in the whole application.
  */
 const PythonConverter = (props: PythonConverterProps) => {
-	const workerRef = useRef<Comlink.Remote<PythonWorker>>();
+	const workerRef = useRef<Comlink.Remote<PythonWorker> | null>(null);
 
 	useEffect(() => {
 		workerRef.current = Comlink.wrap<PythonWorker>(

src/ThreeEditor/components/Editor/SceneEditor.tsx

@@ -2,7 +2,7 @@ import '../../css/main.css';
 
 import { AppBar, Box } from '@mui/material';
 import CircularProgress from '@mui/material/CircularProgress';
-import { useEffect, useRef } from 'react';
+import { RefObject,useEffect, useRef } from 'react';
 import * as THREE from 'three';
 
 import { useStore } from '../../../services/StoreService';
@@ -27,11 +27,11 @@ interface SceneEditorProps {
 }
 
 function SceneEditor(props: SceneEditorProps) {
-	const wrapperElementRef = useRef<HTMLDivElement>(null);
+	const wrapperElementRef = useRef<HTMLElement>(null);
 	const { yaptideEditor, initializeEditor } = useStore();
 	const containerEl = useRef<HTMLDivElement>(null);
 
-	useKeyboardEditorControls(yaptideEditor, wrapperElementRef);
+	useKeyboardEditorControls(yaptideEditor, wrapperElementRef as RefObject<HTMLElement>);
 
 	useEffect(() => {
 		if (containerEl.current) {

src/ThreeEditor/components/Sidebar/SidebarTree/SidebarTreeItem.tsx

@@ -152,7 +152,13 @@ export function SidebarTreeItem(props: {
 	return (
 		<>
 			<Box
-				ref={ref => objectRefs.current.set(object.uuid, ref! as HTMLDivElement)}
+				ref={(ref: HTMLDivElement | null) => {
+					if (ref) {
+						objectRefs.current.set(object.uuid, ref);
+					} else {
+						objectRefs.current.delete(object.uuid);
+					}
+				}}
 				sx={{
 					'marginLeft': ({ spacing }) => spacing(depth * 2.5),
 

src/ThreeEditor/components/ZoneManagerPanel/ZoneManagerPanel.tsx

@@ -187,7 +187,7 @@ function ZoneManagerPanel(props: BooleanZoneManagerPanelProps) {
 	);
 
 	/*------------------------------------BooleanZone-------------------------------------*/
-	const zoneRef = useRef<BooleanZone>();
+	const zoneRef = useRef<BooleanZone | null>(null);
 
 	useEffect(() => {
 		zoneRef.current = zone;

src/WrapperApp/components/CopyToClipboard/CopyToClipboard.jsx

@@ -0,0 +1,45 @@
+import copy from 'copy-to-clipboard';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default class CopyToClipboard extends React.PureComponent {
+	static propTypes = {
+		text: PropTypes.string.isRequired,
+		children: PropTypes.element.isRequired,
+		onCopy: PropTypes.func,
+		options: PropTypes.shape({
+			debug: PropTypes.bool,
+			message: PropTypes.string,
+			format: PropTypes.string
+		})
+	};
+
+	static defaultProps = {
+		onCopy: undefined,
+		options: undefined
+	};
+
+	onClick = event => {
+		const { text, onCopy, children, options } = this.props;
+
+		const elem = React.Children.only(children);
+
+		const result = copy(text, options);
+
+		if (onCopy) {
+			onCopy(text, result);
+		}
+
+		// Bypass onClick if it was present
+		if (elem && elem.props && typeof elem.props.onClick === 'function') {
+			elem.props.onClick(event);
+		}
+	};
+
+	render() {
+		const { text: _text, onCopy: _onCopy, options: _options, children, ...props } = this.props;
+		const elem = React.Children.only(children);
+
+		return React.cloneElement(elem, { ...props, onClick: this.onClick });
+	}
+}

src/WrapperApp/components/Results/Results3D.tsx

@@ -1,8 +1,8 @@
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { Box, Button, Stack, Typography } from '@mui/material';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import { Page3D } from '../../../JsRoot/GraphData';
+import CopyToClipboard from '../CopyToClipboard/CopyToClipboard';
 
 export function Result3D(props: { page: Page3D; title?: string }) {
 	const { page, title } = props;

src/WrapperApp/components/Simulation/SimulationCardGrid.tsx

@@ -186,28 +186,28 @@ export function PaginatedSimulationCardGrid({
 			isAccordion={isAccordion}
 			simulations={simulations}
 			layout={layout}
-			header={(accordion: SimulationAccordionProps) =>
-				SimulationBackendHeader({
-					title,
-					subtitle,
-					accordion,
-					sx: {
+			header={(accordion: SimulationAccordionProps) => (
+				<SimulationBackendHeader
+					title={title}
+					subtitle={subtitle}
+					accordion={accordion}
+					sx={{
 						mb: ({ spacing }: Theme) => spacing(0)
-					},
-					children,
-					...pageData
-				})
-			}
-			footer={() =>
-				SimulationPaginationFooter({
-					...pageData,
-					stickTo: 'bottom',
-					sx: {
+					}}
+					{...pageData}>
+					{children}
+				</SimulationBackendHeader>
+			)}
+			footer={() => (
+				<SimulationPaginationFooter
+					{...pageData}
+					stickTo='bottom'
+					sx={{
 						mt: ({ spacing }: Theme) => spacing(0),
 						zIndex: ({ zIndex }: Theme) => zIndex.appBar
-					}
-				})
-			}
+					}}
+				/>
+			)}
 			{...other}
 		/>
 	);
@@ -266,8 +266,8 @@ export function PaginatedSimulationsFromBackend({
 
 type AccordionCardGridProps = {
 	isAccordion: boolean;
-	header?: FC<SimulationAccordionProps>;
-	footer?: FC<{}>;
+	header?: (props: SimulationAccordionProps) => React.ReactNode;
+	footer?: () => React.ReactNode;
 } & SimulationCardGridProps;
 
 export function AccordionCardGrid({
@@ -320,7 +320,7 @@ export function AccordionCardGrid({
 					simulations={simulations}
 					{...other}
 				/>
-				{footer && footer({})}
+				{footer && footer()}
 			</AccordionDetails>
 		</Accordion>
 	);

src/index.tsx

@@ -1,17 +1,21 @@
 import './index.css';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
-	<React.StrictMode>
-		<App />
-	</React.StrictMode>,
-	document.getElementById('root')
-);
+const container = document.getElementById('root');
+
+if (container) {
+	const root = createRoot(container);
+	root.render(
+		<React.StrictMode>
+			<App />
+		</React.StrictMode>
+	);
+}
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))