Fix deprecation warnings because of React 18 upgrade

Author: andreas-schultz

src/components/Application/stories/ColorPalettes.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { render } from "react-dom";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 import Color from "color";
+import { createRoot } from 'react-dom/client';
 
 import CssCustomProperties from "./../../../common/utils/CssCustomProperties";
 import {
@@ -194,10 +194,11 @@ const ColorPaletteConfigurator = ({
                     }, 0 as number);
                 const warningsTarget = document.getElementById("sumWarnings");
                 if (warningsTarget) {
+                    const warningsRoot = createRoot(warningsTarget)
                     if (warnings > 0) {
-                        render(<Badge intent={"warning"}>{warnings}</Badge>, warningsTarget);
+                        warningsRoot.render(<Badge intent={"warning"}>{warnings}</Badge>);
                     } else {
-                        render(<></>, warningsTarget);
+                        warningsRoot.render(<></>);
                     }
                 }
             }

src/components/AutocompleteField/AutoCompleteField.tsx

@@ -160,19 +160,10 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
     loadMoreResults?: () => Promise<T[] | undefined>;
 }
 
-SuggestField.defaultProps = {
-    autoFocus: false,
-    disabled: false,
-    onlyDropdownWithQuery: false, // FIXME: this should be `true` by default, otherwise similarity to `<Select />` is very close
-    fill: true,
-    requestErrorPrefix: "",
-    hasBackDrop: false,
-};
-
 /**
  * A component with the appearance of an input field that allows to select and optionally create new items.
  * It shows suggestions for the entered text from which the user can select any option.
- * 
+ *
  * It has the following fixed behavior:
  *
  * - When not focused, a different representation of the item value can be shown, e.g. the label of the value.
@@ -187,21 +178,21 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
         className,
         reset,
         noResultText,
-        disabled,
-        onlyDropdownWithQuery,
+        disabled = false,
+        onlyDropdownWithQuery = false, // FIXME: this should be `true` by default, otherwise similarity to `<Select />` is very close
         itemValueSelector,
         itemRenderer,
         onSearch,
         onChange,
         initialValue,
-        autoFocus,
+        autoFocus = false,
         createNewItem,
         itemValueRenderer,
         resetQueryToValue,
         itemValueString,
-        requestErrorPrefix,
-        hasBackDrop,
-        fill,
+        requestErrorPrefix = "",
+        hasBackDrop = false,
+        fill = true,
         loadMoreResults,
         ...otherProps
     } = props;

src/components/Skeleton/Skeleton.tsx

@@ -15,7 +15,7 @@ export interface SkeletonProps {
  */
 export function Skeleton({ children }: SkeletonProps) {
     const alteredChildren = React.Children.map(children, (child) => {
-        const originalChild = child as React.ReactElement<{className: string, disabled: boolean, tabIndex: number}>;
+        const originalChild = child;
         if (originalChild.props) {
             return React.cloneElement(originalChild, {
                 className: originalChild.props.className ? originalChild.props.className + " " + SKELETON : SKELETON,

src/extensions/react-flow/nodes/NodeContent.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Position, useStoreState as getStoreStateFlowV9 } from "react-flow-renderer";
 import { useStore as getStoreStateFlowV12 } from "@xyflow/react";
 import Color from "color";
-import { Resizable } from "re-resizable";
+import {NumberSize, Resizable, ResizeCallback} from "re-resizable";
 
 import { intentClassName, IntentTypes } from "../../../common/Intent";
 import { DepictionProps } from "../../../components";
@@ -756,7 +756,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
         }
     }, [resizeDirections, originalSize, width, height])
 
-    const onResizeStop = React.useCallback((_0:any, _1:any, _2:any, d:any) => {
+    const onResizeStop: ResizeCallback = React.useCallback((_0, _1, _2, d: NumberSize) => {
         const nextWidth = validateWidth((width ?? originalSize.current.width ?? 0) + d.width);
         const nextHeight = validateHeight((height ?? originalSize.current.height ?? 0) + d.height);
         setWidth(nextWidth);