updated react to version 19.*

mhandsteiner · mhandsteiner · commit e1d14e911819 · 2025-07-08T15:08:18.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,8 +27,8 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.7.2",
-    "@react-leaflet/core": "^2.1.0",
-    "@sibvisions/reactui-designer": "^1.4.0",
+    "@react-leaflet/core": "^3.0.0",
+    "@sibvisions/reactui-designer": "^2.0.0",
     "@types/googlemaps": "^3.40.3",
     "buffer": "^6.0.3",
     "chart.js": "3.5.1",
@@ -48,9 +48,9 @@
     "primereact": "^10.9.4",
     "query-string": "^9.1.1",
     "quill": "^2.0.3",
-    "react-error-boundary": "^5.0.0",
+    "react-error-boundary": "^6.0.0",
     "react-helmet": "^6.1.0",
-    "react-leaflet": "^4.2.1",
+    "react-leaflet": "^5.0.0",
     "react-rnd": "^10.3.5",
     "react-router-dom": "^5.2.0",
     "react-signature-canvas": "^1.0.5",
@@ -65,18 +65,18 @@
     "underscore": "^1.13.1"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
     "vite": "^7.0.0",
     "vite-plugin-dts": "^4.5.4",
     "typescript": "^5.8.3",
     "@types/leaflet": "^1.9.8",
-    "@types/node": "^22.14.1",
+    "@types/node": "^24.0.4",
     "@types/quill": "^2.0.14",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@types/react-helmet": "^6.1.0",
     "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.1.6",
diff --git a/src/application-frame/login/MFAURL.tsx b/src/application-frame/login/MFAURL.tsx
@@ -36,7 +36,7 @@ const MFAURL: FC<ILoginForm> = (props) => {
     const context = useContext(appContext);
 
     /** Reference for the gauge component */
-    const gaugeRef = useRef<any>();
+    const gaugeRef = useRef<HTMLDivElement>(null);
 
     /** State of the link object */
     const [link, setLink] = useState<MFAURLType | string>({ width: 500, height: 300, url: "", target: "_self" });
diff --git a/src/application-frame/login/MFAWait.tsx b/src/application-frame/login/MFAWait.tsx
@@ -35,7 +35,7 @@ const MFAWait:FC<ILoginForm> = (props) => {
     const context = useContext(appContext);
 
     /** Reference for the gauge component */
-    const gaugeRef = useRef<any>();
+    const gaugeRef = useRef<HTMLDivElement>(null);
 
     /** State of the code field */
     const [code, setCode] = useState<string>("");
diff --git a/src/main/API.ts b/src/main/API.ts
@@ -31,6 +31,7 @@ import CustomMenuItem from "./util/types/custom-types/CustomMenuItem";
 import { ServerMenuButtons } from "./response/data/MenuResponse";
 import EditableMenuItem from "./util/types/custom-types/EditableMenuItem";
 import CustomToolbarItem from "./util/types/custom-types/CustomToolbarItem";
+import CustomProps from "./util/types/custom-types/CustomProps";
 import CustomStartupProps from "./util/types/custom-types/CustomStartupProps";
 import UserData from "./model/UserData";
 import COMPONENT_CLASSNAMES from "./components/COMPONENT_CLASSNAMES";
@@ -48,7 +49,7 @@ export interface IAPI {
     deleteRecord: (id:string, dataProvider:string) => void,
     addCustomScreen: (id:string, screen:ReactElement) => void,
     addReplaceScreen: (id:string, screen:ReactElement) => void,
-    addScreenWrapper: (id:string, wrapper:ReactElement, pOptions?:ScreenWrapperOptions) => void
+    addScreenWrapper: (id:string, wrapper:ReactElement<CustomProps>, pOptions?:ScreenWrapperOptions) => void
     addMenuItem: (menuItem: CustomMenuItem) => void,
     editMenuItem: (editItem: EditableMenuItem) => void,
     removeMenuItem: (id:string) => void,
@@ -62,7 +63,7 @@ export interface IAPI {
     addGlobalComponent: (name:string, comp:ReactElement) => void,
     addCSSToHeadBefore: (path:string) => void,
     addCSSToHeadAfter: (path:string) => void,
-    extendComponent: (name: string, component: ReactElement) => void,
+    extendComponent: (name: string, component: ReactElement<CustomProps>) => void,
     addCustomLogin: (defaultView:(props: ICustomDefaultLogin) => ReactElement, resetView?: (props: ICustomResetLogin) => ReactElement, mfaTextView?: (props: ICustomMFAText) => ReactElement, mfaWaitView?: (props: ICustomMFAWait) => ReactElement, mfaUrlView?: (props: ICustomMFAUrl) => ReactElement) => void
     getApplicationParameter: (key:string) => any
 }
@@ -245,7 +246,7 @@ class API implements IAPI {
      * @param wrapper - the screen-wrapper which will be added
      * @param pOptions - options of the screen-wrapper currently global:boolean
      */
-    addScreenWrapper(screenName:string, wrapper:ReactElement, pOptions?:ScreenWrapperOptions) {
+    addScreenWrapper(screenName:string, wrapper:ReactElement<CustomProps>, pOptions?:ScreenWrapperOptions) {
         this.#contentStore.screenWrappers.set(screenName, {wrapper: wrapper, options: pOptions ? pOptions : { global: true }});
     }
 
@@ -536,7 +537,7 @@ class API implements IAPI {
      * @param name - the name of the component
      * @param component - the component with the functions to be extended
      */
-    extendComponent(name: string, component: ReactElement) {
+    extendComponent(name: string, component: ReactElement<CustomProps>) {
         const existingComp = this.#contentStore.getComponentByName(name);
         if (existingComp) {
             for (let newPropName in component.props) {
diff --git a/src/main/components/buttons/switch/UISwitch.tsx b/src/main/components/buttons/switch/UISwitch.tsx
@@ -32,7 +32,7 @@ import { RenderButtonHTML, getButtonText } from "../button/UIButton";
 /** This component displays a switch, used when the CheckboxCellEditor style 'ui-switch' is used */
 const UISwitch: FC<IEditorCheckBox & IComponentConstants> = (props) => {
     /** Reference for the switch component */
-    const switchRef = useRef<any>();
+    const switchRef = useRef<InputSwitch>(null);
 
     /** Current state of whether the CheckBox is currently checked or not */
     const [checked, setChecked] = useState(props.selectedRow ? getBooleanValueFromValue(props.selectedRow.data[props.columnName], props.cellEditor.selectedValue) : false);
diff --git a/src/main/components/editors/linked/UIEditorLinked.tsx b/src/main/components/editors/linked/UIEditorLinked.tsx
@@ -957,7 +957,7 @@ const UIEditorLinked: FC<IEditorLinked & IExtendableLinkedEditor & IComponentCon
 
             return Object.entries(suggestionObj).map(([key, value], i:number) => {
                 const cellStyle: CSSProperties = {}
-                let icon: JSX.Element | null = null;
+                let icon: React.JSX.Element | null = null;
                 let colIndex = metaDataReferenced?.columns.findIndex((c) => c.name == key);
                 let column = metaDataReferenced?.columns[colIndex];
                 
diff --git a/src/main/components/editors/text/UIEditorText.tsx b/src/main/components/editors/text/UIEditorText.tsx
@@ -247,7 +247,7 @@ const UIEditorText: FC<IEditorText & IExtendableTextEditor & IComponentConstants
     /** The popup-menu of the ImageViewer */
     const popupMenu = usePopupMenu(props);
 
-    const HTMLEditorRef = useRef<any>();
+    const HTMLEditorRef = useRef<any>(null);
 
     /** Handles the requestFocus property */
     useRequestFocus(id, props.requestFocus, props.forwardedRef.current, props.context)
diff --git a/src/main/components/layouts/FormLayout.tsx b/src/main/components/layouts/FormLayout.tsx
@@ -40,7 +40,7 @@ import { quickSort } from "../../util/other-util/QuickSort";
 const FormLayout: FC<ILayout> = (baseProps) => {
 
     /** Current state of the calculatedStyle by the FormLayout */
-    const calculatedStyle = useRef<{ style?: CSSProperties, componentSizes?: Map<string, CSSProperties> }>();
+    const calculatedStyle = useRef<{ style?: CSSProperties, componentSizes?: Map<string, CSSProperties> }>(null);
 
     /** Use context to gain access for contentstore and server methods */
     const context = useContext(appContext);
diff --git a/src/main/components/layouts/Layout.tsx b/src/main/components/layouts/Layout.tsx
@@ -21,6 +21,7 @@ import FlowLayout from "./FlowLayout";
 import FormLayout from "./FormLayout";
 import GridLayout from "./GridLayout";
 import NullLayout from "./NullLayout";
+import CustomProps from "../../util/types/custom-types/CustomProps";
 import { LayoutAssistant } from "../../util/types/designer/LayoutAssistant";
 import { FormLayoutInformation, LAYOUTS } from "../../util/types/designer/LayoutInformation";
 
@@ -42,7 +43,7 @@ export interface ILayout {
     popupSize?: Dimension,
     minimumSize?: Dimension,
     maximumSize?: Dimension,
-    components: Array<ReactElement>
+    components: Array<ReactElement<CustomProps>>
     compSizes: Map<string, ComponentSizes> | undefined
     style: CSSProperties,
     reportSize: Function,
diff --git a/src/main/components/maps/GMap.tsx b/src/main/components/maps/GMap.tsx
@@ -24,7 +24,7 @@ interface IGMap {
  */
 
 export const GMap: React.ForwardRefExoticComponent<IGMap> = forwardRef((props, ref) => {
-    const map = useRef<any>();
+    const map = useRef<any>(null);
     const container = useRef<HTMLDivElement>(null);
     const [overlays, setOverlays] = useState<any>();
 
diff --git a/src/main/components/maps/UIMapOSM.tsx b/src/main/components/maps/UIMapOSM.tsx
@@ -261,7 +261,7 @@ const UIMapOSMConsumer: FC<IMap & IExtendableMap> = (props) => {
                     let iconData:string|IconProps = getMarkerIcon(point, props.markerImageColumnName, props.marker);
                     const pointValues = getLatAndLngValue(point, props.latitudeColumnName, props.longitudeColumnName);
                     return <Marker
-                        ref={el => markerRefs.current[i] = el}
+                        ref={el => { markerRefs.current[i] = el }}
                         key={props.id + "-Marker-" + i}
                         position={[pointValues.lat, pointValues.lng]}
                         icon={new L.Icon({
diff --git a/src/main/components/message/UIMessage.tsx b/src/main/components/message/UIMessage.tsx
@@ -36,7 +36,7 @@ const UIMessage: FC<DialogResponse> = (props) => {
     const context = useContext(appContext);
 
     /** The properties ConfirmDialog */
-    const feedback = useRef<string>();
+    const feedback = useRef<string>(null);
 
     const [confirmProps, setConfirmProps] = useState<ConfirmDialogProps>({});
 
diff --git a/src/main/components/panels/split/SplitPanel.tsx b/src/main/components/panels/split/SplitPanel.tsx
@@ -20,6 +20,7 @@ import { Tooltip } from "primereact/tooltip";
 import Dimension from "../../../util/types/Dimension";
 import { concatClassnames } from "../../../util/string-util/ConcatClassnames";
 import { parseMaxSize, parseMinSize } from "../../../util/component-util/SizeUtil";
+import CustomProps from "../../../util/types/custom-types/CustomProps";
 
 /** Type for ResizeEvent */
 type onResizeEvent = (firstSize: Dimension, secondSize: Dimension) => void;
@@ -36,8 +37,8 @@ interface ISplitPanel extends IForwardRef {
     dividerPosition: number
     orientation: 0|1
     forwardedRef?: any
-    leftComponent?: ReactElement
-    rightComponent?: ReactElement
+    leftComponent?: ReactElement<CustomProps>
+    rightComponent?: ReactElement<CustomProps>
     onResizeStart?: onResizeEvent
     onResize?: onResizeEvent
     onResizeEnd?: onResizeEvent
diff --git a/src/main/components/panels/split/UISplitPanel.tsx b/src/main/components/panels/split/UISplitPanel.tsx
@@ -25,6 +25,7 @@ import usePopupMenu from "../../../hooks/data-hooks/usePopupMenu";
 import { IExtendableSplitPanel } from "../../../extend-components/panels/ExtendSplitPanel";
 import { concatClassnames } from "../../../util/string-util/ConcatClassnames";
 import { IComponentConstants } from "../../BaseComponent";
+import CustomProps from "../../../util/types/custom-types/CustomProps";
 
 /** Interface for UISplitPanel */
 export interface ISplit extends IBaseComponent {
@@ -46,7 +47,7 @@ const UISplitPanel: FC<ISplit & IExtendableSplitPanel & IComponentConstants> = (
      * @param constraint - the constraint of the child
      * @returns the child based on its constraint
      */
-    const getChildByConstraint = (constraint: string): ReactElement | undefined => {
+    const getChildByConstraint = (constraint: string): ReactElement<CustomProps> | undefined => {
         return components.find((component) => {
             const compProp = children.find(comp => comp.id === component.props.id);
             if(compProp) {
diff --git a/src/main/components/panels/tabsetpanel/TabsetPanelImpl.tsx b/src/main/components/panels/tabsetpanel/TabsetPanelImpl.tsx
@@ -65,7 +65,7 @@ const TabsetPanelImpl: FC<ITabsetImpl & IComponentConstants> = (props) => {
     const context = useContext(appContext);
 
     /** Reference for TabsetPanel element */
-    const panelRef = useRef<any>();
+    const panelRef = useRef<any>(null);
 
     /** Current state of componentSizes */
     const [componentSizes, setComponentSizes] = useState(new Map<string, CSSProperties>());
@@ -139,7 +139,7 @@ const TabsetPanelImpl: FC<ITabsetImpl & IComponentConstants> = (props) => {
         }
 
         /** Array for the built tabs */
-        let tempTabs: Array<JSX.Element> = [];
+        let tempTabs: Array<React.JSX.Element> = [];
         if (props.components) {
             props.components.forEach(component => {
                 if (component.props.className !== COMPONENT_CLASSNAMES.INTERNAL_FRAME) {
diff --git a/src/main/components/table/CellEditor.tsx b/src/main/components/table/CellEditor.tsx
@@ -46,7 +46,7 @@ export interface CellFormatting {
 // Interface for cell-renderer
 export interface ICellRender extends ICellRenderer {
     columnMetaData: ColumnDescription,
-    icon: JSX.Element|null,
+    icon: React.JSX.Element|null,
     filter?: SelectFilter
     stateCallback?: Function,
     decreaseCallback?: Function
diff --git a/src/main/components/table/CellRenderer/DirectCellRenderer.tsx b/src/main/components/table/CellRenderer/DirectCellRenderer.tsx
@@ -26,7 +26,7 @@ import { IEditor } from "../../editors/IEditor";
  */
 const DirectCellRenderer: FC<ICellRender> = (props) => {
     /** A reference to forward to the components */
-    const forwardedRef = useRef<any>();
+    const forwardedRef = useRef<HTMLDivElement>(null);
 
     /** Use context to gain access for contentstore and server methods */
     const context = useContext(appContext);
diff --git a/src/main/components/table/CellRenderer/NumberCellRenderer.tsx b/src/main/components/table/CellRenderer/NumberCellRenderer.tsx
@@ -27,7 +27,7 @@ import { getAlignments } from "../../comp-props/GetAlignments";
  */
 const NumberCellRenderer: FC<ICellRender> = (props) => {
     /** A reference to forward to the components */
-    const forwardedRef = useRef<any>();
+    const forwardedRef = useRef<HTMLDivElement>(null);
 
     /** Use context to gain access for contentstore and server methods */
     const context = useContext(appContext);
diff --git a/src/main/components/table/CellRenderer/TextCellRenderer.tsx b/src/main/components/table/CellRenderer/TextCellRenderer.tsx
@@ -25,7 +25,7 @@ import { getAlignments } from "../../comp-props/GetAlignments";
  */
 const TextCellRenderer: FC<ICellRender> = (props) => {
     /** A reference to forward to the components */
-    const forwardedRef = useRef<any>();
+    const forwardedRef = useRef<HTMLDivElement>(null);
 
     /** Use context to gain access for contentstore and server methods */
     const context = useContext(appContext);
diff --git a/src/main/components/table/UITable.tsx b/src/main/components/table/UITable.tsx
@@ -232,7 +232,7 @@ const UITable: FC<TableProps & IExtendableTable & IComponentConstants> = (props)
         cellHeights.current.set('initial', rowHeight);
     }, [props.designerUpdate])
 
-    const updateRowHeightTimeout = useRef<number>();
+    const updateRowHeightTimeout = useRef<number>(undefined);
     const updateRowHeight = useCallback(() => {
         clearTimeout(updateRowHeightTimeout.current);
         updateRowHeightTimeout.current = window.setTimeout(() => {
@@ -327,10 +327,10 @@ const UITable: FC<TableProps & IExtendableTable & IComponentConstants> = (props)
     const [listLoading, setListLoading] = useState(false);
 
     /** A helper variable which saves the rowselection event to then use the value when the mouse is released */
-    const rowSelectionHelper = useRef<{data: any, selectedColumn: string, index: number, filter: any, event: DataTableSelectionCellChangeEvent<any>}>()
+    const rowSelectionHelper = useRef<{data: any, selectedColumn: string, index: number, filter: any, event: DataTableSelectionCellChangeEvent<any>}>(undefined)
 
     // Cache for the sort-definitions
-    const sortDefinitionCache = useRef<SortDefinition[]>();
+    const sortDefinitionCache = useRef<SortDefinition[]>(undefined);
 
     /** The primary keys of a table */
     const primaryKeys:string[] = useMemo(() => getPrimaryKeys(metaData), [metaData]);
@@ -356,7 +356,7 @@ const UITable: FC<TableProps & IExtendableTable & IComponentConstants> = (props)
     /** Which cell has been clicked */
     const cellClickEventRef = useRef<string>("");
 
-    const contextMenuEventRef = useRef<any>();
+    const contextMenuEventRef = useRef<any>(null);
 
     const popupMenu = usePopupMenu(props, contextMenuEventRef.current);
 
@@ -977,7 +977,7 @@ const UITable: FC<TableProps & IExtendableTable & IComponentConstants> = (props)
     /**
      * Chooses which next select function should be used based on the navigation mode
      */
-    const selectNext = useRef<Function>();
+    const selectNext = useRef<Function>(undefined);
     useEffect(() => {
         selectNext.current = (navigationMode:number) => {
             if (navigationMode === Navigation.NAVIGATION_CELL_AND_FOCUS) {
@@ -996,7 +996,7 @@ const UITable: FC<TableProps & IExtendableTable & IComponentConstants> = (props)
     /**
      * Chooses which previous select function should be used based on the navigation mode
      */
-    const selectPrevious = useRef<Function>();
+    const selectPrevious = useRef<Function>(undefined);
     useEffect(() => {   
         selectPrevious.current = (navigationMode:number, row?:any) => {
             if (navigationMode === Navigation.NAVIGATION_CELL_AND_FOCUS) {
diff --git a/src/main/contentstore/BaseContentStore.tsx b/src/main/contentstore/BaseContentStore.tsx
@@ -27,6 +27,7 @@ import { IChangedColumns } from "../response/data/DataProviderChangedResponse";
 import MetaDataResponse, { LengthBasedColumnDescription, MetaDataReference } from "../response/data/MetaDataResponse";
 import { SortDefinition } from "../request/data/SortRequest";
 import { ScreenWrapperOptions } from "../util/types/custom-types/ScreenWrapperType";
+import CustomProps from "../util/types/custom-types/CustomProps";
 import CustomStartupProps from "../util/types/custom-types/CustomStartupProps";
 import { IPanel } from "../components/panels/panel/UIPanel";
 import { getMetaData } from "../util/data-util/GetMetaData";
@@ -120,7 +121,7 @@ export default abstract class BaseContentStore {
     customProperties = new Map<string, any>();
 
     /** A Map which stores screeen-wrapper names for screens, key is the screen-name and the value is the object of the screen-wrapper */
-    screenWrappers = new Map<string, {wrapper: ReactElement, options: ScreenWrapperOptions}>();
+    screenWrappers = new Map<string, {wrapper: ReactElement<CustomProps>, options: ScreenWrapperOptions}>();
 
     //DataProvider Maps stores the data, selectedRow, selectedColumn etc. for databooks per screen.
     dataBooks = new Map<string, Map<string, IDataBook>>();
diff --git a/src/main/contentstore/ContentStore.tsx b/src/main/contentstore/ContentStore.tsx
@@ -22,6 +22,7 @@ import COMPONENT_CLASSNAMES from "../components/COMPONENT_CLASSNAMES";
 import BaseContentStore, { ActiveScreen } from "./BaseContentStore";
 import { BaseMenuButton, ServerMenuButtons } from "../response/data/MenuResponse";
 import { ScreenWrapperOptions } from "../util/types/custom-types/ScreenWrapperType";
+import CustomProps from "../util/types/custom-types/CustomProps";
 import AppSettings from "../AppSettings";
 import { getNavigationIncrement } from "../util/other-util/GetNavigationIncrement";
 import Server from "../server/Server";
@@ -557,7 +558,7 @@ export default class ContentStore extends BaseContentStore {
      * @param wrapper - the name of the screen-wrapper component
      * @param pOptions - the options for the screen-wrapper component
      */
-    registerScreenWrapper(screenName:string|string[], wrapper:ReactElement, pOptions?:ScreenWrapperOptions) {
+    registerScreenWrapper(screenName:string|string[], wrapper:ReactElement<CustomProps>, pOptions?:ScreenWrapperOptions) {
         if (Array.isArray(screenName))
             screenName.forEach(name => this.screenWrappers.set(name, {wrapper: wrapper, options: pOptions ? pOptions : {global: true}}));
         else 
diff --git a/src/main/contexts/AppProvider.tsx b/src/main/contexts/AppProvider.tsx
@@ -170,7 +170,7 @@ const AppProvider: FC<ICustomContent> = (props) => {
     const [sessionExpired, setSessionExpired] = useState<boolean>(false);
 
     /** Reference for the interval at which alive requests are being sent */
-    const aliveInterval = useRef<any>();
+    const aliveInterval = useRef<any>(undefined);
 
     /**
      * Subscribes to session-expired, app-ready and restart
diff --git a/src/main/factories/UIFactory.tsx b/src/main/factories/UIFactory.tsx
@@ -144,7 +144,7 @@ export function createEditor(props: IRCCellEditor) {
  * @param element - The JSX Element to wrap
  * @returns The original or wrapped JSX Element
  */
-const maybePopup = (element: JSX.Element) => {
+const maybePopup = (element: React.JSX.Element) => {
     if (element.props.screen_modal_ || element.props.content_modal_) {
         return <UIPopupWrapper {...element.props} popupId={element.props.id + "-popup"} render={element} key={'PopupWrapper-' + element.props.id}/> 
     }
diff --git a/src/main/hooks/components-hooks/useComponents.tsx b/src/main/hooks/components-hooks/useComponents.tsx
diff --git a/src/main/hooks/data-hooks/usePopupMenu.tsx b/src/main/hooks/data-hooks/usePopupMenu.tsx
diff --git a/src/main/hooks/event-hooks/useEventHandler.tsx b/src/main/hooks/event-hooks/useEventHandler.tsx
diff --git a/src/main/hooks/event-hooks/useMouseListener.tsx b/src/main/hooks/event-hooks/useMouseListener.tsx
diff --git a/src/main/hooks/event-hooks/useMultipleEventHandler.tsx b/src/main/hooks/event-hooks/useMultipleEventHandler.tsx
diff --git a/src/main/util/types/custom-types/CustomProps.ts b/src/main/util/types/custom-types/CustomProps.ts
diff --git a/src/main/util/types/custom-types/CustomStartupProps.ts b/src/main/util/types/custom-types/CustomStartupProps.ts
