@eccenca/gui-elements 25.1.0-rc.4 → 25.2.0-featureupgradeblueprintjsv6cmem7139.0

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

@@ -2,13 +2,14 @@ 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";
@@ -62,15 +63,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 +87,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 +137,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.
@@ -255,7 +254,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 +294,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 +385,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 +475,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 +539,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
 
     const { highlightClassNameSuffix, highlightCustomPropertySettings } = evaluateHighlightColors(
         "--node-highlight",
-        highlightColor
+        highlightColor,
     );
 
     const resizableStyles =
@@ -548,8 +547,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 +679,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
                         "left",
                         isConnectable,
                         style as MemoHandlerProps["style"],
-                        flowVersionCheck
+                        flowVersionCheck,
                     )}
                     {addHandles(
                         handleStack,
@@ -688,7 +687,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
                         "top",
                         isConnectable,
                         style as MemoHandlerProps["style"],
-                        flowVersionCheck
+                        flowVersionCheck,
                     )}
                     {addHandles(
                         handleStack,
@@ -696,7 +695,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
                         "left",
                         isConnectable,
                         style as MemoHandlerProps["style"],
-                        flowVersionCheck
+                        flowVersionCheck,
                     )}
                     {addHandles(
                         handleStack,
@@ -704,7 +703,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
                         "top",
                         isConnectable,
                         style as MemoHandlerProps["style"],
-                        flowVersionCheck
+                        flowVersionCheck,
                     )}
                 </>
             )}
@@ -735,42 +734,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 +807,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/NodeDefaultV12.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from "react";
 import { NodeProps as ReactFlowNodeProps, Position } from "react-flow-renderer";
 
-import { Tooltip } from "../../../index";
+import Tooltip from "../../../components/Tooltip/Tooltip";
 
 import { NodeContent, NodeContentProps } from "./NodeContent";
 

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,
@@ -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

@@ -201,7 +201,7 @@ const NodeContentExample = (args: any) => {
                 setReactflowInstance(rfi);
             }
         },
-        [reactflowInstance]
+        [reactflowInstance],
     );
 
     return (

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

@@ -110,7 +110,7 @@ const NodeDefaultExample = (args: Node) => {
                 setReactflowInstance(rfi);
             }
         },
-        [reactflowInstance]
+        [reactflowInstance],
     );
 
     return (

package/src/includes/blueprintjs/_variables.scss

@@ -59,3 +59,4 @@ $pt-font-size-small: $eccgui-size-typo-caption !default;
 $pt-line-height: $eccgui-size-typo-text-lineheight !default;
 $pt-icon-size-standard: 20px !default;
 $pt-icon-size-large: 32px !default;
+$pt-border-radius: 2px !default;

package/src/includes/carbon-components/_requisits.scss

@@ -8,11 +8,13 @@
     $use-flexbox-grid: $use-flexbox-grid
 );
 @use "~@carbon/react/scss/utilities/_visually-hidden";
-// we replicate the function here because the distinct import is not ossible via @carbon/react
+
+// we replicate the function here because the distinct import is not possible via @carbon/react
 // @import "~@carbon/styles/scss/components/ui-shell/functions";
 @function mini-units($count) {
     @return 0.5rem * $count;
 }
+
 @import "~@carbon/react/scss/feature-flags";
 @import "~@carbon/react/scss/colors";
 @import "~@carbon/react/scss/theme";

package/src/includes/carbon-components/_variables.scss

@@ -4,7 +4,7 @@
  * - see blueprint import for variables that need to be overwritten with other values
  */
 
- @use "sass:math";
+@use "sass:math";
 
 // Configuration
 

package/src/index.scss

@@ -25,10 +25,10 @@
 // calculate blueprintjs configuration
 @import "./includes/blueprintjs/variables";
 
-// map our palette to BLueprint colors
+// map our palette to BlueprintJS colors
 @import "./includes/blueprintjs/colormap";
 
-// load blueprintjs requisists
+// load blueprintjs requisites
 @import "./includes/blueprintjs/requisits";
 
 // load blueprintjs components

package/src/test/setupTests.js

@@ -1,6 +1,6 @@
 import "regenerator-runtime/runtime";
 
-if (window.document) {
+if (typeof window !== "undefined" && window.document) {
     window.document.body.createTextRange = function () {
         return {
             setEnd: function () {},