fix: fix React18 ref types (#7775)

Author: Lukas742

packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx

@@ -1,6 +1,6 @@
 import type { Virtualizer } from '@tanstack/react-virtual';
 import { clsx } from 'clsx';
-import type { MutableRefObject, RefObject } from 'react';
+import type { MutableRefObject } from 'react';
 import { useEffect, useMemo, useRef } from 'react';
 import type {
   AnalyticalTablePropTypes,
@@ -35,7 +35,7 @@ interface VirtualTableBodyProps {
   subRowsKey: string;
   scrollContainerRef?: MutableRefObject<HTMLDivElement>;
   triggerScroll?: TriggerScrollState;
-  scrollToRef: RefObject<ReactVirtualScrollToMethods>;
+  scrollToRef: MutableRefObject<ReactVirtualScrollToMethods>;
   rowVirtualizer: Virtualizer<DivWithCustomScrollProp, HTMLElement>;
 }
 

packages/main/src/components/AnalyticalTable/hooks/useScrollToRef.ts

@@ -1,12 +1,12 @@
-import type { RefCallback, RefObject } from 'react';
+import type { RefCallback, MutableRefObject } from 'react';
 import { useCallback, useRef } from 'react';
 import type { AnalyticalTableScrollMode } from '../../../enums/AnalyticalTableScrollMode.js';
 import type { AnalyticalTableDomRef, ScrollToRefType, TableInstance } from '../types/index.js';
 
 export function useScrollToRef(
   componentRef: (node: AnalyticalTableDomRef) => void,
   dispatch: TableInstance['dispatch'],
-): [RefCallback<AnalyticalTableDomRef>, RefObject<ScrollToRefType | null>] {
+): [RefCallback<AnalyticalTableDomRef>, MutableRefObject<ScrollToRefType | null>] {
   const scrollToRef = useRef<ScrollToRefType | null>(null);
 
   const cbRef: RefCallback<AnalyticalTableDomRef> = useCallback(

packages/main/src/components/AnalyticalTable/util/index.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, RefObject } from 'react';
+import type { CSSProperties, MutableRefObject, RefObject } from 'react';
 import { TextAlign } from '../../../enums/TextAlign.js';
 import { VerticalAlign } from '../../../enums/VerticalAlign.js';
 
@@ -191,7 +191,7 @@ export function getLeafHeaders(header) {
 }
 
 export const getCombinedElementsHeight = (
-  prevHeightRef: RefObject<number>,
+  prevHeightRef: MutableRefObject<number>,
   ...refs: RefObject<HTMLElement>[]
 ): number => {
   const prevHeight = prevHeightRef.current;

packages/main/src/components/MessageView/MessageItem.tsx

@@ -128,8 +128,7 @@ const MessageItem = forwardRef<ListItemCustomDomRef, MessageItemPropTypes>((prop
   useEffect(() => {
     if (typeof titleText === 'string') {
       setTitleTextStr(titleText);
-    } else if (isValidElement(titleText) && typeof (titleText.props as LinkPropTypes)?.children === 'string') {
-      // @ts-expect-error: props.children is available and a string
+    } else if (isValidElement<LinkPropTypes>(titleText) && typeof titleText.props.children === 'string') {
       setTitleTextStr(titleText.props.children);
     }
   }, [titleText]);

packages/main/src/components/ObjectPage/useHandleTabSelect.ts

@@ -1,6 +1,6 @@
 import type { debounce } from '@ui5/webcomponents-react-base';
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
-import type { Dispatch, JSXElementConstructor, ReactElement, RefObject, SetStateAction } from 'react';
+import type { Dispatch, JSXElementConstructor, MutableRefObject, ReactElement, RefObject, SetStateAction } from 'react';
 import { isValidElement, useEffect, useState } from 'react';
 import { ObjectPageMode } from '../../enums/ObjectPageMode.js';
 import type { TabContainerPropTypes } from '../../webComponents/TabContainer/index.js';
@@ -16,11 +16,11 @@ interface UseHandleTabSelectProps {
   childrenArray: ReactElement<ObjectPageSectionPropTypes, string | JSXElementConstructor<any>>[];
   handleOnSectionSelected: any;
 
-  isProgrammaticallyScrolled: RefObject<boolean>;
+  isProgrammaticallyScrolled: MutableRefObject<boolean>;
   setInternalSelectedSectionId: Dispatch<SetStateAction<string>>;
   objectPageRef: RefObject<ObjectPageDomRef>;
   debouncedOnSectionChange: ReturnType<typeof debounce>;
-  scrollTimeout: RefObject<number>;
+  scrollTimeout: MutableRefObject<number>;
   setSelectedSubSectionId: Dispatch<SetStateAction<string>>;
   setTabSelectId: Dispatch<SetStateAction<string | null>>;
   setWasUserSectionChange: Dispatch<SetStateAction<boolean>>;