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

package/src/extensions/react-flow/minimap/MiniMap.tsx

@@ -2,7 +2,7 @@ import React, { memo, useEffect } from "react";
 import {
     MiniMap as ReactFlowMiniMapV9,
     MiniMapProps as ReactFlowMiniMapV9Props,
-    OnLoadParams
+    OnLoadParams,
 } from "react-flow-renderer";
 import { FlowTransform } from "react-flow-renderer/dist/types";
 
@@ -26,14 +26,19 @@ export interface MiniMapBasicProps {
     >;
 }
 
-export interface MiniMapV9Props extends MiniMapBasicProps, ReactFlowMiniMapV9Props {
+/**
+ * @deprecated (v27) will be removed when React Flow v9 can be removed
+ */
+interface MiniMapV9Props extends MiniMapBasicProps, ReactFlowMiniMapV9Props {
     /**
      * React-Flow instance
      */
     flowInstance?: OnLoadParams;
 }
 
-export type MiniMapProps = (ReacFlowVersionSupportProps & MiniMapV9Props) | (ReacFlowVersionSupportProps & MiniMapV12Props);
+export type MiniMapProps =
+    | (ReacFlowVersionSupportProps & MiniMapV9Props)
+    | (ReacFlowVersionSupportProps & MiniMapV12Props);
 
 interface configParams {
     // Key has been pressed down over the mini-map and navigation mode has thus started
@@ -51,29 +56,24 @@ let minimapCalcConf: configParams = {
 };
 
 /** An improved mini-map for react-flow that supports navigation via the mini-map. */
-export const MiniMap = memo(
-    ({
-        flowVersion,
-        ...otherProps
-    }: MiniMapProps) => {
-        const flowVersionCheck = flowVersion || useReactFlowVersion();
-        
-        switch (flowVersionCheck) {
-            case ReactFlowVersions.V9:
-                return <MiniMapV9 {...otherProps as MiniMapV9Props} />;
-            case ReactFlowVersions.V12:
-                return <MiniMapV12 {...otherProps as MiniMapV12Props} />;
-            default:
-                return <></>; // cannot exit on its own
-        }
+export const MiniMap = memo(({ flowVersion, ...otherProps }: MiniMapProps) => {
+    const flowVersionCheck = flowVersion || useReactFlowVersion();
+
+    switch (flowVersionCheck) {
+        case ReactFlowVersions.V9:
+            return <MiniMapV9 {...(otherProps as MiniMapV9Props)} />;
+        case ReactFlowVersions.V12:
+            return <MiniMapV12 {...(otherProps as MiniMapV12Props)} />;
+        default:
+            return <></>; // cannot exit on its own
     }
-);
+});
 
 /**
- * Mini-map support for for React Flow v9.
- * @deprecated (v26) will be removed, use when `MiniMap` directly
+ * Mini-map support for React Flow v9.
+ * @deprecated (v27) will be removed when React Flow v9 can be removed
  */
-export const MiniMapV9 = memo(
+const MiniMapV9 = memo(
     ({
         flowInstance,
         enableNavigation = false,
@@ -173,7 +173,7 @@ export const MiniMapV9 = memo(
                 />
             </div>
         );
-    }
+    },
 );
 
-export default MiniMap;
+export default MiniMap;

package/src/extensions/react-flow/minimap/MiniMapV12.tsx

@@ -4,12 +4,14 @@ import { MiniMap as ReactFlowMiniMap, MiniMapProps as ReactFlowMiniMapProps } fr
 import { MiniMapBasicProps } from "./MiniMap";
 import { miniMapUtils } from "./utils";
 
-export interface MiniMapV12Props extends MiniMapBasicProps, Omit<ReactFlowMiniMapProps, "maskColor"> {
-}
+/**
+ * @deprecated (v27) will be removed when React Flow v9 can be removed
+ */
+export interface MiniMapV12Props extends MiniMapBasicProps, Omit<ReactFlowMiniMapProps, "maskColor"> {}
 
 /**
- * Mini-map support for for React Flow v12.
- * @deprecated (v26) will be removed when `MiniMap` supports v12 directly
+ * Mini-map support for React Flow v12.
+ * @deprecated (v27) will be removed when React Flow v9 can be removed
  */
 export const MiniMapV12 = memo(
     ({
@@ -35,5 +37,5 @@ export const MiniMapV12 = memo(
                 />
             </div>
         );
-    }
+    },
 );

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

@@ -2,25 +2,21 @@ 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, ResizableProps, ResizeCallback } from "re-resizable";
 
 import { intentClassName, IntentTypes } from "../../../common/Intent";
-import { DepictionProps } from "../../../components";
+import { Depiction, DepictionProps } from "../../../components";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
+import Icon from "../../../components/Icon/Icon";
+import OverflowText from "../../../components/Typography/OverflowText";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { Depiction, Icon, OverflowText } from "../../../index";
 import { ReacFlowVersionSupportProps, ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
 
-import { HandleDefault, HandleDefaultProps } from "./../handles/HandleDefault";
+import { HandleDefault, HandleDefaultProps } from "../handles/HandleDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
 import { NodeDefaultProps } from "./NodeDefault";
 import { NodeHighlightColor } from "./sharedTypes";
 
-/**
- * @deprecated (v26) use `HandleDefaultProps`
- */
-export type NodeContentHandleProps = HandleDefaultProps;
-
 export type NodeDimensions = {
     width?: number;
     height?: number;
@@ -62,15 +58,15 @@ interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Any element that should be displayed as depiction before the node label.
      */
-    leftElement?: JSX.Element;
+    leftElement?: React.JSX.Element;
     /**
      * Label that is displayed in the node header.
      */
-    label: string | JSX.Element;
+    label: string | React.JSX.Element;
     /**
      * Element that is displayed as subline under the label in the header.
      */
-    labelSubline?: JSX.Element;
+    labelSubline?: React.JSX.Element;
     /**
      * Content element, displayed in the node body.
      */
@@ -86,9 +82,7 @@ interface NodeContentData<CONTENT_PROPS = any> {
 }
 
 export interface NodeContentProps<CONTENT_PROPS = any>
-    extends NodeContentData,
-        ReacFlowVersionSupportProps,
-        Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
+    extends NodeContentData, ReacFlowVersionSupportProps, Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
     /**
      * Size of the node.
      * If `minimalShape` is not set to `none`then the configured size definition is only used for the selected node state.
@@ -138,7 +132,7 @@ export interface NodeContentProps<CONTENT_PROPS = any>
      */
     executionButtons?: (
         adjustedContentProps: Partial<CONTENT_PROPS>,
-        setAdjustedContentProps: React.Dispatch<React.SetStateAction<Partial<CONTENT_PROPS>>>
+        setAdjustedContentProps: React.Dispatch<React.SetStateAction<Partial<CONTENT_PROPS>>>,
     ) => React.ReactElement<React.HTMLAttributes<HTMLElement>>;
     /**
      * Can be used for permanent action button or context menu.
@@ -178,7 +172,6 @@ export interface NodeContentProps<CONTENT_PROPS = any>
 
     /**
      * Additional data stored in the node.
-     * @deprecated (v26) is not used anymore.
      */
     businessData?: never;
 
@@ -230,7 +223,7 @@ type MemoHandlerProps = HandleDefaultProps & {
 
 type HandleStack = { [key: string]: HandleDefaultProps[] };
 
-const defaultHandles = (flowVersion: ReacFlowVersionSupportProps["flowVersion"]): NodeContentHandleProps[] => {
+const defaultHandles = (flowVersion: ReacFlowVersionSupportProps["flowVersion"]): HandleDefaultProps[] => {
     switch (flowVersion) {
         case "v9":
         case "v12":
@@ -255,7 +248,7 @@ const addHandles = (
     posDirection: MemoHandlerProps["posdirection"],
     isConnectable: MemoHandlerProps["isConnectable"],
     nodeStyle: MemoHandlerProps["style"],
-    flowVersion: ReacFlowVersionSupportProps["flowVersion"] = ReactFlowVersions.V9
+    flowVersion: ReacFlowVersionSupportProps["flowVersion"] = ReactFlowVersions.V9,
 ) => {
     return handles[position].map((handle: HandleDefaultProps, idx: number) => {
         // FIXME: remove? orig v12 change: return handles[position].map((handle: any, idx: any) => {
@@ -295,10 +288,10 @@ const MemoHandler = React.memo(
             prev.intent === next.intent &&
             prev.category === next.category
         );
-    }
+    },
 );
 
-const DEFAULT_RESIZE_DIRECTIONS: ResizeDirections = { bottom: true, right: true }
+const DEFAULT_RESIZE_DIRECTIONS: ResizeDirections = { bottom: true, right: true };
 /**
  * The `NodeContent` element manages the main view of how a node is displaying which content.
  * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
@@ -386,7 +379,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
             console.error(error);
         }
     const [adjustedContentProps, setAdjustedContentProps] = React.useState<Partial<CONTENT_PROPS>>({});
-    const nodeContentRef = React.useRef<any>();
+    const nodeContentRef = React.useRef<any>(undefined);
 
     const handleStack: Record<string, HandleDefaultProps[]> = {
         [Position.Top]: [],
@@ -476,18 +469,18 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
     // remove introduction class
     React.useEffect(() => {
         if (nodeContentRef && introductionTime) {
-            const timeDelay = typeof introductionTime === "object" ? introductionTime.delay ?? 0 : 0;
+            const timeDelay = typeof introductionTime === "object" ? (introductionTime.delay ?? 0) : 0;
             const timeRun = typeof introductionTime === "object" ? introductionTime.run : introductionTime;
             setTimeout(() => {
                 nodeContentRef.current.className = nodeContentRef.current.className.replace(
                     `${eccgui}-graphviz__node--introduction`,
-                    `${eccgui}-graphviz__node--introduction-runs`
+                    `${eccgui}-graphviz__node--introduction-runs`,
                 );
             }, timeDelay);
             setTimeout(() => {
                 nodeContentRef.current.className = nodeContentRef.current.className.replace(
                     `${eccgui}-graphviz__node--introduction-runs`,
-                    `${eccgui}-graphviz__node--introduction-done`
+                    `${eccgui}-graphviz__node--introduction-done`,
                 );
                 setIntroductionDone(true);
             }, timeDelay + timeRun);
@@ -540,7 +533,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
 
     const { highlightClassNameSuffix, highlightCustomPropertySettings } = evaluateHighlightColors(
         "--node-highlight",
-        highlightColor
+        highlightColor,
     );
 
     const resizableStyles =
@@ -548,8 +541,8 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
             ? {
                   width,
                   height,
-                  maxWidth: resizeDirections.right ? resizeMaxDimensions?.width ?? undefined : undefined,
-                  maxHeight: resizeDirections.bottom ? resizeMaxDimensions?.height ?? undefined : undefined,
+                  maxWidth: resizeDirections.right ? (resizeMaxDimensions?.width ?? undefined) : undefined,
+                  maxHeight: resizeDirections.bottom ? (resizeMaxDimensions?.height ?? undefined) : undefined,
               }
             : {};
 
@@ -680,7 +673,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
                         "left",
                         isConnectable,
                         style as MemoHandlerProps["style"],
-                        flowVersionCheck
+                        flowVersionCheck,
                     )}
                     {addHandles(
                         handleStack,
@@ -688,7 +681,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
                         "top",
                         isConnectable,
                         style as MemoHandlerProps["style"],
-                        flowVersionCheck
+                        flowVersionCheck,
                     )}
                     {addHandles(
                         handleStack,
@@ -696,7 +689,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
                         "left",
                         isConnectable,
                         style as MemoHandlerProps["style"],
-                        flowVersionCheck
+                        flowVersionCheck,
                     )}
                     {addHandles(
                         handleStack,
@@ -704,7 +697,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
                         "top",
                         isConnectable,
                         style as MemoHandlerProps["style"],
-                        flowVersionCheck
+                        flowVersionCheck,
                     )}
                 </>
             )}
@@ -735,42 +728,51 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
         return validatedHeight;
     };
 
-    const onResize = React.useCallback((_0, _1, _2, d) => {
-        if (nodeContentRef.current) {
-            const nextWidth = resizeDirections.right
-                ? (width ?? originalSize.current.width ?? 0) + d.width
-                : undefined;
-            const nextHeight = resizeDirections.bottom
-                ? (height ?? originalSize.current.height ?? 0) + d.height
-                : undefined;
-            if (nextWidth || nextHeight) {
-                const currentClassNames = nodeContentRef.current.classList;
-                currentClassNames.add("was-resized");
-            }
-            if (nextWidth) {
-                nodeContentRef.current.style.width = `${nextWidth}px`;
+    const onResize: ResizableProps["onResize"] = React.useCallback(
+        (_0: any, _1: any, _2: any, d: NumberSize) => {
+            if (nodeContentRef.current) {
+                const nextWidth = resizeDirections.right
+                    ? (width ?? originalSize.current.width ?? 0) + d.width
+                    : undefined;
+                const nextHeight = resizeDirections.bottom
+                    ? (height ?? originalSize.current.height ?? 0) + d.height
+                    : undefined;
+                if (nextWidth || nextHeight) {
+                    const currentClassNames = nodeContentRef.current.classList;
+                    currentClassNames.add("was-resized");
+                }
+                if (nextWidth) {
+                    nodeContentRef.current.style.width = `${nextWidth}px`;
+                }
+                if (nextHeight) {
+                    nodeContentRef.current.style.height = `${nextHeight}px`;
+                }
             }
-            if (nextHeight) {
-                nodeContentRef.current.style.height = `${nextHeight}px`;
+        },
+        [resizeDirections, originalSize, width, height],
+    );
+
+    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);
+            setHeight(nextHeight);
+            if (onNodeResize) {
+                onNodeResize({
+                    height: nextHeight,
+                    width: nextWidth,
+                });
             }
-        }
-    }, [resizeDirections, originalSize, width, height])
-
-    const onResizeStop = React.useCallback((_0, _1, _2, d) => {
-        const nextWidth = validateWidth((width ?? originalSize.current.width ?? 0) + d.width);
-        const nextHeight = validateHeight((height ?? originalSize.current.height ?? 0) + d.height);
-        setWidth(nextWidth);
-        setHeight(nextHeight);
-        if (onNodeResize) {
-            onNodeResize({
-                height: nextHeight,
-                width: nextWidth,
-            });
-        }
-    }, [onNodeResize, width, height, originalSize]);
+        },
+        [onNodeResize, width, height, originalSize],
+    );
 
     const resizableSize = React.useMemo(() => ({ height: height ?? "auto", width: width ?? "auto" }), [height, width]);
-    const enableResize = React.useMemo(() => resizeDirections!.bottom && resizeDirections!.right ? { bottomRight: true } : resizeDirections, [resizeDirections]);
+    const enableResize = React.useMemo(
+        () => (resizeDirections!.bottom && resizeDirections!.right ? { bottomRight: true } : resizeDirections),
+        [resizeDirections],
+    );
 
     const resizableNode = () => {
         return (
@@ -799,7 +801,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
 
 const evaluateHighlightColors = (
     baseCustomProperty: string,
-    highlightColor?: NodeHighlightColor | NodeHighlightColor[]
+    highlightColor?: NodeHighlightColor | NodeHighlightColor[],
 ) => {
     let styleHighlightColors = {
         [`${baseCustomProperty}-default-color`]: undefined,

package/src/extensions/react-flow/nodes/NodeDefault.tsx

@@ -2,7 +2,7 @@ import React, { memo } from "react";
 import { NodeProps as ReactFlowNodeV9Props } from "react-flow-renderer";
 import { NodeProps as ReactFlowNodeV12Props, Position } from "@xyflow/react";
 
-import { Tooltip } from "../../../index";
+import Tooltip from "../../../components/Tooltip/Tooltip";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
 import { NodeContent, NodeContentProps } from "./NodeContent";
@@ -16,9 +16,12 @@ interface NodeDefaultExtendedProps<CONTENT_PROPS = any> extends ReacFlowVersionS
 }
 
 type NodeDefaultV9Props<CONTENT_PROPS = any> = NodeDefaultExtendedProps<CONTENT_PROPS> & ReactFlowNodeV9Props;
-type NodeDefaultV12Props<CONTENT_PROPS = any> = NodeDefaultExtendedProps<CONTENT_PROPS> & Omit<ReactFlowNodeV12Props, "data">;
+type NodeDefaultV12Props<CONTENT_PROPS = any> = NodeDefaultExtendedProps<CONTENT_PROPS> &
+    Omit<ReactFlowNodeV12Props, "data">;
 
-export type NodeDefaultProps<CONTENT_PROPS = any> = NodeDefaultV9Props<CONTENT_PROPS> | NodeDefaultV12Props<CONTENT_PROPS>;
+export type NodeDefaultProps<CONTENT_PROPS = any> =
+    | NodeDefaultV9Props<CONTENT_PROPS>
+    | NodeDefaultV12Props<CONTENT_PROPS>;
 
 /**
  * The `NodeDefault` element manages the display of React-Flow nodes.

package/src/extensions/react-flow/nodes/NodeTools.tsx

@@ -2,10 +2,10 @@ import React, { memo, useEffect, useState } from "react";
 import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
 
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
+import IconButton from "../../../components/Icon/IconButton";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { ContextOverlay, IconButton } from "../../../index";
 
-import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
+import ContextOverlay, { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
 
 // Functions regarding the menu that can be called from the outside
 export interface NodeToolsMenuFunctions {
@@ -14,8 +14,8 @@ export interface NodeToolsMenuFunctions {
 }
 
 export interface NodeToolsProps extends Omit<ContextOverlayProps, "children"> {
-    children: string | JSX.Element;
-    togglerElement?: ValidIconName | JSX.Element;
+    children: string | React.JSX.Element;
+    togglerElement?: ValidIconName | React.JSX.Element;
     togglerText?: string;
     menuButtonDataTestId?: string;
     /** If defined this function will be called with the menu API object to be used externally. */
@@ -63,5 +63,5 @@ export const NodeTools = memo(
                 )}
             </ContextOverlay>
         );
-    }
+    },
 );

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -376,7 +376,8 @@
         display: block;
         content: " ";
         border: 0.1px solid transparent; // workaround for Firefox, otherwise shadows are overlayed
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width var(--node-highlight-default-color),
+        box-shadow:
+            0 0 0 2 * $reactflow-node-border-width var(--node-highlight-default-color),
             0 0 0 3.5 * $reactflow-node-border-width
                 var(--node-highlight-alternate-color, var(--node-highlight-default-color));
         opacity: $eccgui-opacity-disabled;

package/src/extensions/react-flow/nodes/nodeUtils.tsx

@@ -1,9 +1,9 @@
 import { CSSProperties } from "react";
-import {Node as NodeV9, XYPosition as XYPositionV9} from "react-flow-renderer";
-import {Node as NodeV12, XYPosition as XYPositionV12} from "@xyflow/react";
+import { Node as NodeV9, XYPosition as XYPositionV9 } from "react-flow-renderer";
+import { Node as NodeV12, XYPosition as XYPositionV12 } from "@xyflow/react";
 import Color from "color";
 
-import {NodeDimensions} from "./NodeContent";
+import { NodeDimensions } from "./NodeContent";
 
 interface StickyNoteBase {
     id: string;
@@ -30,9 +30,14 @@ const transformNodeToStickyNode = (node: NodeV9<any> | NodeV12<any>): StickyNote
     return {
         id: node.id,
         content: node.data.businessData.stickyNote!,
-        position: {x: node.position.x, y: node.position.y, width: node.data.nodeDimensions?.width, height: node.data.nodeDimensions?.height},
+        position: {
+            x: node.position.x,
+            y: node.position.y,
+            width: node.data.nodeDimensions?.width,
+            height: node.data.nodeDimensions?.height,
+        },
         color: node.data.style?.borderColor!,
-    }
+    };
 };
 
 /**

package/src/extensions/react-flow/nodes/sharedTypes.ts

@@ -1,2 +1,2 @@
-import Color from "color";
-export type NodeHighlightColor = "default" | "alternate" | Color | string;
+import { ColorLike } from "color";
+export type NodeHighlightColor = "default" | "alternate" | ColorLike;

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

@@ -5,19 +5,18 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { Definitions } from "../../../../common/Intent";
 
-import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
 import {
     Badge,
     ContextMenu,
     HtmlContentBlock,
     IconButton,
     MenuItem,
-    NodeContent,
-    NodeContentExtension,
     OverflowText,
     Tag,
     TagList,
-} from "./../../../../index";
+} from "./../../../../components";
+import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
+import { NodeContent, NodeContentExtension } from "./../../../../extensions";
 import {
     Default as ContentExtensionExample,
     SlideOutOfNode as ContentExtensionExampleSlideOut,
@@ -64,8 +63,8 @@ export default {
                         {loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 5, random: false })
                             .toString()
                             .split(" ")
-                            .map((term) => (
-                                <Tag small>{term}</Tag>
+                            .map((term, id) => (
+                                <Tag small key={id}>{term}</Tag>
                             ))}
                     </TagList>
                 ),
@@ -103,11 +102,20 @@ export default {
         },
         intent: {
             control: "select",
-            options: [ undefined, ...Object.values(Definitions) ],
+            options: [undefined, ...Object.values(Definitions)],
         },
         highlightColor: {
             control: "select",
-            options: [ "Not set", "Default", "Alternate", "Default + alternate", "Custom (red)", "Default + Custom (red)", "Custom (green) + alternate", "Custom (purple) + custom (yellow)"],
+            options: [
+                "Not set",
+                "Default",
+                "Alternate",
+                "Default + alternate",
+                "Custom (red)",
+                "Default + Custom (red)",
+                "Custom (green) + alternate",
+                "Custom (purple) + custom (yellow)",
+            ],
             mapping: {
                 "Not set": undefined,
                 Default: "default",
@@ -142,39 +150,43 @@ const NodeContentExample = (args: any) => {
     };
 
     useEffect(() => {
-        const sizeReset = {}
+        const sizeReset = {};
         if (args.resizeMaxDimensions && args.resizeDirections) {
             sizeReset["onNodeResize"] = (dimensions) => {
                 // eslint-disable-next-line no-console
-                console.log("call onNodeResize method")
+                console.log("call onNodeResize method");
                 if (args.onNodeResize) {
                     args.onNodeResize(dimensions);
                 }
                 if (dimensions?.width || dimensions?.height) {
-                    sizeReset["menuButtons"] = <IconButton name="item-reset" onClick={() => {
-                        // eslint-disable-next-line no-console
-                        console.log("reset size");
-                        setElements([
-                            {
-                                ...defaultElement,
-                                data: {...defaultElement.data, ...sizeReset, ...{ nodeDimensions: {} }},
-                            },
-                        ] as Elements);
-
-                    }}/>;
+                    sizeReset["menuButtons"] = (
+                        <IconButton
+                            name="item-reset"
+                            onClick={() => {
+                                // eslint-disable-next-line no-console
+                                console.log("reset size");
+                                setElements([
+                                    {
+                                        ...defaultElement,
+                                        data: { ...defaultElement.data, ...sizeReset, ...{ nodeDimensions: {} } },
+                                    },
+                                ] as Elements);
+                            }}
+                        />
+                    );
                 }
                 setElements([
                     {
                         ...defaultElement,
-                        data: {...defaultElement.data, ...sizeReset, ...{ nodeDimensions: dimensions }},
+                        data: { ...defaultElement.data, ...sizeReset, ...{ nodeDimensions: dimensions } },
                     },
                 ] as Elements);
-            }
+            };
         }
         setElements([
             {
                 ...defaultElement,
-                data: {...defaultElement.data, ...sizeReset},
+                data: { ...defaultElement.data, ...sizeReset },
             },
         ] as Elements);
     }, [args]);
@@ -185,7 +197,7 @@ const NodeContentExample = (args: any) => {
                 setReactflowInstance(rfi);
             }
         },
-        [reactflowInstance]
+        [reactflowInstance],
     );
 
     return (
@@ -201,7 +213,9 @@ const NodeContentExample = (args: any) => {
     );
 };
 
-const Template: StoryFn<typeof NodeContent> = (args) => <NodeContentExample {...args} /*some comment*/  key={++forcedUpdateKey} />;
+const Template: StoryFn<typeof NodeContent> = (args) => (
+    <NodeContentExample {...args} /*some comment*/ key={++forcedUpdateKey} />
+);
 
 export const Default = Template.bind({});
 Default.args = {

package/src/extensions/react-flow/nodes/stories/NodeContentV12.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, StoryFn } from "@storybook/react";
 import { Node, ReactFlow, ReactFlowProvider, useNodesState } from "@xyflow/react";
 
 import { Definitions } from "../../../../common/Intent";
-import { NodeDefaultV12 } from "../NodeDefaultV12";
+import { NodeDefault } from "../NodeDefault";
 
 import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
 import {
@@ -140,7 +140,7 @@ export default {
 
 let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
 
-const nodeTypes = { default: NodeDefaultV12 };
+const nodeTypes = { default: NodeDefault };
 
 const NodeContentExample = (args: any) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
@@ -201,7 +201,7 @@ const NodeContentExample = (args: any) => {
                 setReactflowInstance(rfi);
             }
         },
-        [reactflowInstance]
+        [reactflowInstance],
     );
 
     return (