Change/upgraded to react18 CMEM-6639

package.json

@@ -92,8 +92,8 @@
         "lodash": "^4.17.21",
         "n3": "^1.26.0",
         "re-resizable": "^6.10.3",
-        "react": "^16.13.1",
-        "react-dom": "^16.14.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "react-flow-renderer": "9.7.4",
         "react-inlinesvg": "^3.0.3",
         "react-is": "^16.13.1",
@@ -179,7 +179,7 @@
         "react": ">=16"
     },
     "resolutions": {
-        "**/@types/react": "^17.0.90",
+        "**/@types/react": "^18.2.0",
         "node-sass-package-importer/**/postcss": "^8.5.6",
         "string-width": "^4.2.3",
         "wrap-ansi": "^7.0.0",

src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -27,16 +27,16 @@ export interface ActivityControlWidgetProps extends TestableComponent {
     /**
      * The label to be shown
      */
-    label?: string | JSX.Element;
+    label?: string | React.JSX.Element;
     /**
      * Element that wraps around the label.
      * Default: `<OverflowText inline={true} />`
      */
-    labelWrapper?: JSX.Element;
+    labelWrapper?: React.JSX.Element;
     /**
      * To add tags in addition to the widget status description
      */
-    tags?: JSX.Element;
+    tags?: React.JSX.Element;
     /**
      * The progress bar parameters if it should be show by a progres bar
      */
@@ -80,7 +80,7 @@ export interface ActivityControlWidgetProps extends TestableComponent {
     /**
      * execution timer messages for waiting and running times.
      */
-    timerExecutionMsg?: JSX.Element | null;
+    timerExecutionMsg?: React.JSX.Element | null;
     /**
      * additional actions that can serve as a complex component, positioned between the default actions and the context menu
      */
@@ -146,7 +146,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                     keepColors
                 >
                     {progressSpinnerFinishedIcon ? (
-                        React.cloneElement(progressSpinnerFinishedIcon as JSX.Element, { small, large: !small })
+                        React.cloneElement(progressSpinnerFinishedIcon as React.JSX.Element, { small, large: !small })
                     ) : (
                         <Spinner
                             position="inline"

src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx

@@ -8,7 +8,7 @@ interface ActivityExecutionErrorReportModalProps {
     // Called when the close button is clicked
     onDiscard: () => any;
     // The error report
-    report: JSX.Element;
+    report: React.JSX.Element;
     // Value of the download button
     downloadButtonValue: string;
     // Value of the close button

src/cmem/ActivityControl/SilkActivityControl.tsx

@@ -15,11 +15,11 @@ const progressBreakpointAnimation = 99;
 
 export interface SilkActivityControlProps extends TestableComponent {
     // The label of this activity
-    label: string | JSX.Element;
+    label: string | React.JSX.Element;
     /**
      * To add tags in addition to the widget status description
      */
-    tags?: JSX.Element;
+    tags?: React.JSX.Element;
     // Initial state
     initialStatus?: SilkActivityStatusProps;
     // Register a function in order to receive callbacks
@@ -80,7 +80,7 @@ export interface SilkActivityControlLayoutProps {
     // what type of progrss display should be uses, horizontal progress bar, circular spinner, or none of that
     visualization?: "none" | "progressbar" | "spinner";
     // wrapper around label
-    labelWrapper?: JSX.Element;
+    labelWrapper?: React.JSX.Element;
 }
 
 const defaultLayout: SilkActivityControlLayoutProps = {
@@ -94,7 +94,7 @@ interface IErrorReportAction {
     // The title of the error report modal
     title?: string;
     // The element that will be rendered in the modal, either as Markdown or object
-    renderReport: (report: string | SilkActivityExecutionReportProps) => JSX.Element;
+    renderReport: (report: string | SilkActivityExecutionReportProps) => React.JSX.Element;
     // What version of the report should be handed to the renderReport function, if false SilkActivityExecutionReportProps, if true the Markdown string
     renderMarkdown: boolean;
     // The function to fetch the error report. It returns undefined if something went wrong.

src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -21,7 +21,7 @@ export interface StringPreviewContentBlobTogglerProps
     /** Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary.
      * This allows to add non-string elements to both the full-view content and the pure string content.
      */
-    noTogglerContentSuffix?: JSX.Element;
+    noTogglerContentSuffix?: React.JSX.Element;
 }
 
 /** Version of the content toggler for text only content. */

src/cmem/react-flow/configuration/graph.ts

@@ -1,8 +1,7 @@
+import { NodeProps } from "react-flow-renderer";
 import { EdgeBezier } from "./../../../extensions/react-flow/edges/EdgeBezier";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 import { GRAPH_NODE_TYPES } from "./typing";
-//import {ComponentType} from "react";
-//import {NodeProps} from "react-flow-renderer-lts";
 
 const edgeTypes = {
     default: EdgeBezier,
@@ -16,7 +15,7 @@ const edgeTypes = {
     danger: EdgeBezier,
 };
 
-const nodeTypes: Record<GRAPH_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
+const nodeTypes: Record<GRAPH_NODE_TYPES, React.ComponentType<NodeProps>> = {
     default: NodeDefault,
     graph: NodeDefault,
     class: NodeDefault,

src/cmem/react-flow/configuration/linking.ts

@@ -2,8 +2,7 @@ import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 import { StickyNoteNode } from "./../nodes/StickyNoteNode";
 import { LINKING_NODE_TYPES } from "./typing";
-//import {ComponentType} from "react";
-//import {NodeProps} from "react-flow-renderer-lts";
+import {NodeProps} from "react-flow-renderer";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -14,7 +13,7 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes: Record<LINKING_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
+const nodeTypes: Record<LINKING_NODE_TYPES, React.ComponentType<NodeProps> /*& ComponentType<NodeProps>*/> = {
     default: NodeDefault,
     sourcepath: NodeDefault,
     targetpath: NodeDefault,

src/cmem/react-flow/configuration/workflow.ts

@@ -2,8 +2,7 @@ import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 import { StickyNoteNode } from "./../nodes/StickyNoteNode";
 import { WORKFLOW_NODE_TYPES } from "./typing";
-//import {ComponentType} from "react";
-//import {NodeProps} from "react-flow-renderer-lts";
+import {NodeProps} from "react-flow-renderer";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -12,7 +11,7 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
+const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ComponentType<NodeProps>> = {
     default: NodeDefault,
     dataset: NodeDefault,
     linking: NodeDefault,

src/components/Accordion/AccordionItem.tsx

@@ -18,7 +18,7 @@ export interface AccordionItemProps
     /**
      * header of accordion item
      */
-    label: string | JSX.Element;
+    label: string | React.JSX.Element;
     /**
      * use full available width for content
      */

src/components/Application/ApplicationSidebarNavigation.tsx

@@ -4,14 +4,18 @@ import { SideNav as CarbonSideNav, SideNavProps as CarbonSideNavProps } from "@c
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ApplicationSidebarNavigationProps
-    extends Omit<CarbonSideNavProps, "ref" | "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
-        React.HTMLAttributes<HTMLElement> {}
+    extends Omit<CarbonSideNavProps, "ref" | "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader"| "onToggle"> {
+            children: React.ReactNode;
+            className?: string;
+            onToggle?: any //todo change later
+        }
 
 export const ApplicationSidebarNavigation = ({
     children,
     className = "",
     ...otherCarbonSideNavProps
 }: ApplicationSidebarNavigationProps) => {
+
     return (
         <CarbonSideNav
             className={`${eccgui}-application__menu__sidebar ${className}`}

src/components/Application/ApplicationTitle.tsx

@@ -60,7 +60,13 @@ export const ApplicationTitle = ({
             <span className={`${eccgui}-application__title--content`}>
                 {!!depiction && (
                     <>
-                        <span className={`${eccgui}-application__title--depiction`}>{depiction}</span>
+                        <span className={`${eccgui}-application__title--depiction`}>
+                            {React.isValidElement(depiction)
+                                ? depiction
+                                : depiction instanceof HTMLElement
+                                    ? <>{depiction.outerHTML}</>
+                                    : depiction}
+                        </span>
                     </>
                 )}
                 {!!prefix && (

src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -124,10 +124,10 @@ export interface CodeAutocompleteFieldProps {
      */
     useTabForCompletions?: boolean;
     /** An additional element that is put to the left side of the input field */
-    leftElement?: JSX.Element | null;
+    leftElement?: React.JSX.Element | null;
     /** An additional element that is put to the right side of the input field
      */
-    rightElement?: JSX.Element | null;
+    rightElement?: React.JSX.Element | null;
     /** Placeholder tobe shown when no text has been entered, yet. */
     placeholder?: string;
     /** If the horizontal scrollbars should be shown. */
@@ -214,7 +214,7 @@ export const CodeAutocompleteField = ({
         CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
     >(undefined);
     const [cm, setCM] = React.useState<EditorView>();
-    const currentCm = React.useRef<EditorView>();
+    const currentCm = React.useRef<EditorView>(undefined);
     currentCm.current = cm;
     const isFocused = React.useRef(false);
     const autoSuggestionDivRef = React.useRef<HTMLDivElement>(null);
@@ -361,7 +361,7 @@ export const CodeAutocompleteField = ({
         return { fromOffset, toOffset };
     };
 
-    const inputActionsDisplayed = React.useCallback((node) => {
+    const inputActionsDisplayed = React.useCallback((node:any) => {
         if (!node) return;
         const width = node.offsetWidth;
         const slCodeEditor = node.parentElement.getElementsByClassName(`${eccgui}-singlelinecodeeditor`);

src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -88,7 +88,7 @@ export const AutoSuggestionList = ({
 }: AutoSuggestionListProps) => {
     const [hoveredItem, setHoveredItem] = React.useState<CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined>(undefined);
     // Refs of list items
-    const [refs] = React.useState<React.RefObject<Element>[]>([]);
+    const [refs] = React.useState<React.RefObject<Element | null>[]>([]);
     const dropdownRef = React.useRef<HTMLDivElement>(null);
     const generateRef = (index: number) => {
         if (!refs[index]) {

src/components/AutocompleteField/AutoCompleteField.tsx

@@ -64,7 +64,7 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
         query: string,
         modifiers: SuggestFieldItemRendererModifierProps,
         handleClick: () => any
-    ): string | JSX.Element;
+    ): string | React.JSX.Element;
 
     /** Renders the string that should be displayed in the input field after the item has been selected.
      */
@@ -122,7 +122,7 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
             query: string,
             modifiers: SuggestFieldItemRendererModifierProps,
             handleClick: React.MouseEventHandler<HTMLElement>
-        ) => JSX.Element | undefined;
+        ) => React.JSX.Element | undefined;
 
         /** If the new item option will always be shown as the first entry in the suggestion list, else it will be the last entry.
          * @default false

src/components/AutocompleteField/autoCompleteFieldUtils.tsx

@@ -14,7 +14,7 @@ import { SuggestFieldItemRendererModifierProps } from "./interfaces";
  * @param iconName Optional icon to show left to the text.
  */
 export const createNewItemRendererFactory = (
-    itemTextRenderer: (query: string) => string | JSX.Element,
+    itemTextRenderer: (query: string) => string | React.JSX.Element,
     iconName?: ValidIconName | React.ReactElement<TestIconProps>
 ) => {
     // Return custom render function

src/components/Button/Button.tsx

@@ -47,19 +47,19 @@ interface AdditionalButtonProps {
     /**
      * takes in either a string of text or a react element to display as a tooltip when the button is hovered.
      */
-    tooltip?: string | JSX.Element | null;
+    tooltip?: string | React.JSX.Element | null;
     /**
      * Object with additional properties for the tooltip.
      */
     tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
     /**
      * Icon displayed on button start.
      */
-    icon?: ValidIconName | JSX.Element;
+    icon?: ValidIconName | React.JSX.Element;
     /**
      * Icon displayed on button end.
      */
-    rightIcon?: ValidIconName | JSX.Element;
+    rightIcon?: ValidIconName | React.JSX.Element;
 }
 
 interface ExtendedButtonProps

src/components/Card/CardHeader.tsx

@@ -8,7 +8,7 @@ import CardOptions from "./CardOptions";
 import CardTitle from "./CardTitle";
 
 export interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
-    children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
+    children: React.JSX.Element | (React.JSX.Element | undefined | null)[] | null | undefined;
 }
 
 export const CardHeader = ({ children, className = "", ...otherProps }: CardHeaderProps) => {

src/components/ContentGroup/ContentGroup.tsx

@@ -179,6 +179,7 @@ export const ContentGroup = ({
                             )}
                         </ToolbarSection>
                     )}
+                    <></>
                     {contextInfoElements &&
                         contextInfoElements[0]?.props &&
                         Object.values(contextInfoElements[0].props).every((v) => v !== undefined) && (

src/components/ContextOverlay/ContextMenu.tsx

@@ -17,13 +17,13 @@ export interface ContextMenuProps extends TestableComponent {
      * The elements of the context menu.
      * They will be wrapped in a `Menu` element automatically.
      */
-    children?: JSX.Element | JSX.Element[];
+    children?: React.JSX.Element | React.JSX.Element[];
     /**
      * Toggler that need to be used to display menu.
      * If a valid icon name is used then the icon element is displayed.
      * In this case `togglerText`, `togglerLarge` and `tooltipAsTitle` are used, too.
      */
-    togglerElement?: ValidIconName | JSX.Element;
+    togglerElement?: ValidIconName | React.JSX.Element;
     /**
      * Text displayed as title or tooltip on toggler element.
      */

src/components/ContextOverlay/ContextOverlay.tsx

@@ -13,7 +13,7 @@ export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "positi
     /**
      * `target` element to use as toggler for the overlay display.
      */
-    children?: JSX.Element;
+    children?: React.JSX.Element;
     /**
      * Type of counter property to `Modal.forceTopPosition`.
      * Use it when you need to display modal dialogs out of the context overlay.
@@ -108,7 +108,7 @@ export const ContextOverlay = ({
         return () => {};
     }, [!!placeholderRef.current, otherPopoverProps.interactionKind]);
 
-    const refocus = React.useCallback((node) => {
+    const refocus = React.useCallback((node:any) => {
         const target = node?.targetRef.current.children[0];
         if (!eventMemory.current || !target) {
             return;

src/components/Depiction/Depiction.tsx

@@ -65,7 +65,7 @@ export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Description of the depiction.
      */
-    caption?: string | JSX.Element;
+    caption?: string | React.JSX.Element;
     /**
      * How is the caption displayed.
      */

src/components/Dialog/Modal.tsx

@@ -112,7 +112,7 @@ export const Modal = ({
 
     const alteredChildren = React.Children.map(children, (child) => {
         if ((child as React.ReactElement).type && (child as React.ReactElement).type === Card) {
-            return React.cloneElement(child as React.ReactElement, {
+            return React.cloneElement(child as React.ReactElement<{isOnlyLayout: boolean, elevation: number}>, {
                 isOnlyLayout: true,
                 elevation: 4,
             });

src/components/Dialog/SimpleDialog.tsx

@@ -30,7 +30,7 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
     /**
      * Can contain elements actionable/non-actionable elements display right-aligned to the dialog title.
      */
-    headerOptions?: null | JSX.Element | JSX.Element[];
+    headerOptions?: null | React.JSX.Element | React.JSX.Element[];
     /**
      * If enabled neither closing via `esc` key or clicking outside of the component will work, except explicitly specified.
      */

src/components/Form/FieldItem.tsx

@@ -24,7 +24,7 @@ export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, Te
      * Text for user help.
      * Is displayed between label and input element.
      */
-    helperText?: string | JSX.Element;
+    helperText?: string | React.JSX.Element;
     /**
      * Feedback notification.
      * Is displayed below the included input element.