@eccenca/gui-elements 25.2.0 → 26.0.0-rc.0

package/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx

@@ -1,6 +1,9 @@
 import React, { useState } from "react";
 
-import { Button, HtmlContentBlock, IconButton, SimpleDialog } from "../../index";
+import Button from "../../components/Button/Button";
+import SimpleDialog from "../../components/Dialog/SimpleDialog";
+import IconButton from "../../components/Icon/IconButton";
+import HtmlContentBlock from "../../components/Typography/HtmlContentBlock";
 
 interface ActivityExecutionErrorReportModalProps {
     // Title of the modal
@@ -8,7 +11,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

package/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.
@@ -177,28 +177,24 @@ export function useSilkActivityControl({
     const [errorReport, setErrorReport] = useState<string | SilkActivityExecutionReportProps | undefined>(undefined);
 
     // Register update function
-    useEffect(
-        () => {
-            const updateActivityStatus = (status: SilkActivityStatusProps | undefined) => {
-                if (status?.concreteStatus !== "Waiting") {
-                    setShowStartPrioritized(false);
-                } else if (executePrioritized) {
-                    // Show start prioritized button only-if the activity is still in Waiting status after 2s
-                    setTimeout(() => {
-                        if (currentStatus.current?.concreteStatus === "Waiting") {
-                            setShowStartPrioritized(true);
-                        }
-                    }, 2000);
-                }
-                currentStatus.current = status;
-                setActivityStatus(status);
-            };
-            registerForUpdates(updateActivityStatus);
-            return unregisterFromUpdates;
-        },
-         
-        []
-    );
+    useEffect(() => {
+        const updateActivityStatus = (status: SilkActivityStatusProps | undefined) => {
+            if (status?.concreteStatus !== "Waiting") {
+                setShowStartPrioritized(false);
+            } else if (executePrioritized) {
+                // Show start prioritized button only-if the activity is still in Waiting status after 2s
+                setTimeout(() => {
+                    if (currentStatus.current?.concreteStatus === "Waiting") {
+                        setShowStartPrioritized(true);
+                    }
+                }, 2000);
+            }
+            currentStatus.current = status;
+            setActivityStatus(status);
+        };
+        registerForUpdates(updateActivityStatus);
+        return unregisterFromUpdates;
+    }, []);
 
     // Create activity actions
     const actions: ActivityControlWidgetProps["activityActions"] = [];
@@ -300,8 +296,8 @@ export function useSilkActivityControl({
                     (activityStatus.statusName === "Running"
                         ? activityStatus?.startTime
                         : activityStatus.statusName === "Waiting"
-                        ? activityStatus.queueTime
-                        : activityStatus?.startTime)!
+                          ? activityStatus.queueTime
+                          : activityStatus?.startTime)!
                 }
                 translateUnits={translateUnits}
             />
@@ -325,8 +321,8 @@ export function useSilkActivityControl({
                     waitingProgress || (runningProgress && indeterminateProgress)
                         ? undefined
                         : activityStatus && activityStatus.progress > 0
-                        ? activityStatus.progress / 100
-                        : 0,
+                          ? activityStatus.progress / 100
+                          : 0,
                 intent,
             },
         };
@@ -338,8 +334,8 @@ export function useSilkActivityControl({
                     waitingProgress || (runningProgress && indeterminateProgress)
                         ? undefined
                         : activityStatus && activityStatus.progress > 0
-                        ? activityStatus.progress / 100
-                        : 0,
+                          ? activityStatus.progress / 100
+                          : 0,
                 intent,
             },
         };

package/src/cmem/ActivityControl/tests/ActivityControlWidget.test.tsx

@@ -31,7 +31,7 @@ describe("ActivityControlWidget", () => {
                 data-testid="basic-widget"
                 activityActions={actions}
                 statusMessage="Status message"
-            />
+            />,
         );
 
         const button1 = screen.getByTestId("action-1");

package/src/cmem/ConfidenceValue/ConfidenceValue.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Color from "color";
+import Color, { ColorLike } from "color";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
@@ -27,7 +27,7 @@ export interface ConfidenceValueProps extends Omit<React.HTMLAttributes<HTMLSpan
      * Color of the confidence bar.
      * By default it is colorized red for values below the `centerValue`, otherwise green.
      */
-    barColor?: Color | string;
+    barColor?: ColorLike;
     /**
      * The value is displayed by a bar.
      * This confidence bar can be start from the left or right side, or from the center of the element.
@@ -71,14 +71,15 @@ export function ConfidenceValue({
         value === centerValue
             ? 0
             : value < centerValue
-            ? value / (minValue - centerValue)
-            : value / (maxValue - centerValue);
+              ? value / (minValue - centerValue)
+              : value / (maxValue - centerValue);
 
     let color = Color("#000000");
     if (barColor) {
         try {
             color = Color(barColor);
-        } catch (ex) {
+        } catch {
+            // eslint-disable-next-line no-console
             console.warn("Received invalid color for confidence bar: " + barColor);
         }
     }

package/src/cmem/ContentBlobToggler/ContentBlobToggler.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 
-import { Link, Spacing } from "../../index";
+import Link from "../../components/Link/Link";
+import Spacing from "../../components/Separation/Spacing";
+import InlineText from "../../components/Typography/InlineText";
 
 export interface ContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -31,6 +33,10 @@ export interface ContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivEle
         Callback if toggler is necessary. Default: true
     */
     enableToggler?: boolean;
+    /**
+     * Force always inline rendering.
+     */
+    forceInline?: boolean;
 }
 
 /** Shows a preview with the option to expand to a full view (and back). */
@@ -42,27 +48,29 @@ export function ContentBlobToggler({
     fullviewContent,
     startExtended = false,
     enableToggler = true,
+    forceInline = false,
     ...otherProps
 }: ContentBlobTogglerProps) {
     const [isExtended, setViewState] = useState(startExtended);
-    const handlerToggleView = (event: any) => {
+    const handlerToggleView = (event: React.MouseEvent<HTMLAnchorElement>) => {
         event.preventDefault();
         event.stopPropagation();
         setViewState(!isExtended);
     };
 
-    return (
+    const tooglerDisplay = (
         <div className={className} {...otherProps}>
             {!isExtended ? (
                 <>
                     {previewContent}
                     {enableToggler && (
                         <>
-                            {" "}&hellip;{" "}
+                            {" "}
+                            &hellip;{" "}
                             <Link
                                 href="#more"
                                 data-test-id={"content-blob-toggler-more-link"}
-                                onClick={(e: any) => {
+                                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
                                     handlerToggleView(e);
                                 }}
                             >
@@ -76,11 +84,11 @@ export function ContentBlobToggler({
                     {fullviewContent}
                     {enableToggler && (
                         <div>
-                            <Spacing size="small" />
+                            {forceInline ? <> </> : <Spacing size="small" />}
                             <Link
                                 data-test-id={"content-blob-toggler-less-link"}
                                 href="#less"
-                                onClick={(e: any) => {
+                                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
                                     handlerToggleView(e);
                                 }}
                             >
@@ -92,4 +100,6 @@ export function ContentBlobToggler({
             )}
         </div>
     );
+
+    return forceInline ? <InlineText>{tooglerDisplay}</InlineText> : tooglerDisplay;
 }

package/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -1,9 +1,15 @@
 import React from "react";
 
-import { ContentBlobToggler, ContentBlobTogglerProps, InlineText, Markdown, utils } from "./../../index";
+import { utils } from "../../common";
+import InlineText from "../../components/Typography/InlineText";
+import { Markdown } from "../markdown/Markdown";
 
-export interface StringPreviewContentBlobTogglerProps
-    extends Omit<ContentBlobTogglerProps, "previewContent" | "enableToggler"> {
+import { ContentBlobToggler, ContentBlobTogglerProps } from "./ContentBlobToggler";
+
+export interface StringPreviewContentBlobTogglerProps extends Omit<
+    ContentBlobTogglerProps,
+    "previewContent" | "enableToggler"
+> {
     /**
      * The preview content will be cut to this length if it is too long.
      */
@@ -16,7 +22,6 @@ export interface StringPreviewContentBlobTogglerProps
     /**
      * Use only parts of `content` in the preview.
      * `firstMarkdownSection` uses the content until the first double line return.
-     * Currently overwritten by `firstNonEmptyLineOnly`.
      */
     useOnly?: "firstNonEmptyLine" | "firstMarkdownSection";
     /**
@@ -31,13 +36,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;
-    /**
-     * If only the first non-empty line should be shown in the preview.
-     * This will in addition also be shortened according to `previewMaxLength`.
-     * @deprecated (v26) use `useOnly="firstNonEmptyLine"` instead
-     */
-    firstNonEmptyLineOnly?: boolean;
+    noTogglerContentSuffix?: React.JSX.Element;
 }
 
 /** Version of the content toggler for text centric content. */
@@ -53,15 +52,10 @@ export function StringPreviewContentBlobToggler({
     renderPreviewAsMarkdown = false,
     allowedHtmlElementsInPreview,
     noTogglerContentSuffix,
-    firstNonEmptyLineOnly,
+    ...otherContentBlobTogglerProps
 }: StringPreviewContentBlobTogglerProps) {
-    // need to test `firstNonEmptyLineOnly` until property is removed
-    const useOnlyTest: StringPreviewContentBlobTogglerProps["useOnly"] = firstNonEmptyLineOnly
-        ? "firstNonEmptyLine"
-        : useOnly;
-
     let previewString = content;
-    switch (useOnlyTest) {
+    switch (useOnly) {
         case "firstNonEmptyLine":
             previewString = useOnlyPart(content, regexFirstNonEmptyLine);
             break;
@@ -105,6 +99,7 @@ export function StringPreviewContentBlobToggler({
             fullviewContent={fullviewContent}
             startExtended={startExtended}
             enableToggler={enableToggler}
+            {...otherContentBlobTogglerProps}
         />
     );
 }

package/src/cmem/ContentBlobToggler/tests/StringPreviewContentBlobToggler.test.tsx

@@ -21,12 +21,12 @@ describe("StringPreviewContentBlobToggler", () => {
         const { queryByText } = render(
             <StringPreviewContentBlobToggler
                 {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
-            />
+            />,
         );
         textMustExist(queryByText, "A library for GUI elements.");
         textMustNotExist(
             queryByText,
-            "In order to create graphical user interfaces, please have look at the documentation at"
+            "In order to create graphical user interfaces, please have look at the documentation at",
         );
         textMustExist(queryByText, "show more");
     });
@@ -35,11 +35,11 @@ describe("StringPreviewContentBlobToggler", () => {
             <StringPreviewContentBlobToggler
                 {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
                 startExtended
-            />
+            />,
         );
         textMustExist(
             queryByText,
-            "In order to create graphical user interfaces, please have look at the documentation at"
+            "In order to create graphical user interfaces, please have look at the documentation at",
         );
         textMustExist(queryByText, "show less");
     });
@@ -48,7 +48,7 @@ describe("StringPreviewContentBlobToggler", () => {
             <StringPreviewContentBlobToggler
                 {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
                 useOnly={"firstNonEmptyLine"}
-            />
+            />,
         );
         textMustExist(queryByText, "A library for GUI elements.");
         textMustNotExist(queryByText, "In order to create");
@@ -58,7 +58,7 @@ describe("StringPreviewContentBlobToggler", () => {
             <StringPreviewContentBlobToggler
                 {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
                 useOnly={"firstMarkdownSection"}
-            />
+            />,
         );
         textMustExist(queryByText, "A library for GUI elements.");
         textMustExist(queryByText, "In order to create");
@@ -69,12 +69,12 @@ describe("StringPreviewContentBlobToggler", () => {
             <StringPreviewContentBlobToggler
                 {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
                 previewMaxLength={144}
-            />
+            />,
         );
         textMustExist(queryByText, "A library for GUI elements.");
         textMustExist(
             queryByText,
-            "In order to create graphical user interfaces, please have look at the documentation at"
+            "In order to create graphical user interfaces, please have look at the documentation at",
         );
         textMustNotExist(queryByText, "https://github.com/"); // test if Markdown was rendered
         textMustNotExist(queryByText, "show more");
@@ -85,12 +85,12 @@ describe("StringPreviewContentBlobToggler", () => {
                 {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
                 previewMaxLength={144}
                 renderPreviewAsMarkdown={false}
-            />
+            />,
         );
         textMustExist(queryByText, "A library for GUI elements.");
         textMustExist(
             queryByText,
-            "In order to create graphical user interfaces, please have look at the documentation at"
+            "In order to create graphical user interfaces, please have look at the documentation at",
         );
         textMustExist(queryByText, "https://github.com/"); // test if Markdown was rendered
         textMustExist(queryByText, "show more");

package/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx

@@ -56,7 +56,7 @@ const elapsedTimeSegmented = (elapsedTimeInMs: number): number[] => {
 const simplifiedElapsedTime = (
     timeSegments: number[],
     translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string,
-    includeSeconds = false
+    includeSeconds = false,
 ) => {
     const units: ElapsedDateTimeDisplayUnits[] = ["day", "hour", "minute"];
 
@@ -75,7 +75,7 @@ const simplifiedElapsedTime = (
         return `< 1 ${translateUnits("minute")}`;
     } else {
         return `${timeSegments[idx]} ${translateUnits(
-            (units[idx] + (timeSegments[idx] > 1 ? "s" : "")) as ElapsedDateTimeDisplayUnits
+            (units[idx] + (timeSegments[idx] > 1 ? "s" : "")) as ElapsedDateTimeDisplayUnits,
         )}`;
     }
 };

package/src/cmem/DateTimeDisplay/tests/ElapsedDateTimeDisplay.test.tsx

@@ -9,8 +9,8 @@ describe("Elapsed time component", () => {
         expect(
             elapsedDateTimeDisplayUtils.simplifiedElapsedTime(
                 elapsedDateTimeDisplayUtils.elapsedTimeSegmented(timeInSeconds * 1000),
-                translate
-            )
+                translate,
+            ),
         ).toBe(expectedString);
     it("should segment the time", () => {
         checkMS(2123, "0:0:0:2");

package/src/cmem/markdown/Markdown.tsx

@@ -8,8 +8,9 @@ import { remarkDefinitionList } from "remark-definition-list";
 import remarkGfm from "remark-gfm";
 import { PluggableList } from "unified";
 
+import { TestableComponent } from "../../components";
+import { HtmlContentBlock, HtmlContentBlockProps } from "../../components/Typography";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { HtmlContentBlock, HtmlContentBlockProps, TestableComponent } from "../../index";
 
 export interface MarkdownProps extends TestableComponent {
     children: string;

package/src/cmem/markdown/highlightSearchWords.test.ts

@@ -29,7 +29,7 @@ describe("Highlight search words reHype plugin", () => {
             },
             new VFile(),
 
-            () => {}
+            () => {},
         );
         const rootChildren = (result as Root).children;
         expect(rootChildren.length).toBe(1);

package/src/cmem/markdown/markdownutils.test.ts

@@ -3,14 +3,14 @@ import utils from "./markdown.utils";
 describe("Markdown utils", () => {
     it("should extract named anchors from the Markdown", () => {
         const namedAnchors = utils.extractNamedAnchors(
-            '# Header\n\nsome text\n\n## <a  id="anchor1" ></a> point 1\n\n## <a id="anchor2"></a> point 2'
+            '# Header\n\nsome text\n\n## <a  id="anchor1" ></a> point 1\n\n## <a id="anchor2"></a> point 2',
         );
         expect(namedAnchors).toStrictEqual(["anchor1", "anchor2"]);
     });
 
     it("should not extract named anchors from the Markdown that are not following the expected format", () => {
         const namedAnchors = utils.extractNamedAnchors(
-            '# <a id="anchor" href="http://">link text</a> \n\n## <a name="test" id="anchor2"></a> point 2'
+            '# <a id="anchor" href="http://">link text</a> \n\n## <a name="test" id="anchor2"></a> point 2',
         );
         expect(namedAnchors).toStrictEqual([]);
     });

package/src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx

@@ -7,7 +7,7 @@ import {
     Position,
 } from "react-flow-renderer";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 import {
     Background as BackgroundV12,
     BackgroundVariant as BackgroundVariantV12,
@@ -444,7 +444,7 @@ const ReactFlowExampleV9: FC<ReactFlowExtendedProps> = (args) => {
                     }}
                 >
                     EdgeTools demo, add elements here.
-                </EdgeTools>
+                </EdgeTools>,
             );
         }
     }, []);
@@ -455,7 +455,7 @@ const ReactFlowExampleV9: FC<ReactFlowExtendedProps> = (args) => {
                 setReactflowInstance(rfi);
             }
         },
-        [reactflowInstance]
+        [reactflowInstance],
     );
 
     const { style, ...otherProps } = args;

package/src/cmem/react-flow/ReactFlow/ReactFlow.tsx

@@ -93,7 +93,7 @@ const ReactFlowExtendedPlain = <T extends ReactFlowExtendedProps>(
         zoomActivationKeyCode,
         ...originalProps
     }: T,
-    outerRef: Ref<HTMLDivElement>
+    outerRef: Ref<HTMLDivElement>,
 ) => {
     const innerRef = React.useRef<HTMLDivElement>(null);
     React.useImperativeHandle(outerRef, () => innerRef.current!, []);
@@ -205,13 +205,8 @@ const ReactFlowExtendedPlain = <T extends ReactFlowExtendedProps>(
 
 /** Hack to make the Type Parameter work with the forward ref. */
 export const ReactFlowExtended = React.forwardRef(ReactFlowExtendedPlain) as <T extends ReactFlowExtendedProps>(
-    p: T & { ref?: Ref<HTMLDivElement> }
+    p: T & { ref?: Ref<HTMLDivElement> },
 ) => ReactElement;
 
-/**
- * @deprecated (v26) use `ReactFlowExtended`
- */
-export const ReactFlow = ReactFlowExtended;
-
 /** Classes that when set for an element, prevent that they trigger react-flow dragging, wheel and panning actions. */
 export const preventReactFlowActionsClasses = "nodrag nopan nowheel";

package/src/cmem/react-flow/ReactFlow/ReactFlowV12.tsx

@@ -53,5 +53,5 @@ export const ReactFlowV12Container = React.forwardRef<HTMLDivElement, ReactFlowV
                 {children}
             </ReactFlowV12>
         );
-    }
+    },
 );

package/src/cmem/react-flow/ReactFlow/ReactFlowV9.tsx

@@ -1,8 +1,5 @@
 import React from "react";
-import {
-    default as ReactFlowV9,
-    ReactFlowProps as ReactFlowV9Props
-} from "react-flow-renderer";
+import { default as ReactFlowV9, ReactFlowProps as ReactFlowV9Props } from "react-flow-renderer";
 
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 
@@ -25,5 +22,5 @@ export const ReactFlowV9Container = React.forwardRef<HTMLDivElement, ReactFlowV9
                 {children}
             </ReactFlowV9>
         );
-    }
+    },
 );

package/src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx

@@ -40,7 +40,10 @@ export interface StickyNoteModalProps {
     /**
      * Forward other properties to the `SimpleModal` element that is used for this dialog.
      */
-    simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions" | "children">;
+    simpleDialogProps?: Omit<
+        SimpleDialogProps,
+        "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions" | "children"
+    >;
     /**
      * Code editor props
      */
@@ -52,7 +55,7 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
         const refNote = React.useRef<string>(metaData?.note ?? "");
         const [color, setSelectedColor] = React.useState<string>(metaData?.color ?? "");
         const noteColors: [string, string][] = Object.entries(getColorConfiguration("stickynotes")).map(
-            ([key, value]) => [key, value as string]
+            ([key, value]) => [key, value as string],
         );
         const { disableHotKeys } = React.useContext(ReactFlowHotkeyContext);
 
@@ -149,5 +152,5 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
                 </FieldItem>
             </SimpleDialog>
         );
-    }
+    },
 );

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

@@ -1,8 +1,8 @@
+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 +16,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,

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

@@ -1,9 +1,9 @@
+import { NodeProps } from "react-flow-renderer";
+
 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";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -14,7 +14,7 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes: Record<LINKING_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
+const nodeTypes: Record<LINKING_NODE_TYPES, React.ComponentType<NodeProps>> = {
     default: NodeDefault,
     sourcepath: NodeDefault,
     targetpath: NodeDefault,

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

@@ -1,9 +1,9 @@
+import { NodeProps } from "react-flow-renderer";
+
 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";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -12,7 +12,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,