@eccenca/gui-elements 23.0.0 → 23.1.0-easynav.1

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

@@ -1,9 +1,12 @@
 import React from "react";
-import { Position, useStoreState } from "react-flow-renderer";
-import { Icon, Tooltip } from "../../../index";
+import { Position, useStoreState as useStoreStateFlowLegacy } from "react-flow-renderer";
+import { useStore as useStoreStateFlowNext } from "react-flow-renderer-lts";
+import { Icon, Depiction, OverflowText } from "../../../index";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-import { HandleDefault, HandleProps } from "./../handles/HandleDefault";
+import { DepictionProps } from "../../../components/Depiction/Depiction";
+import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
+import { HandleDefault, HandleProps, HandleNextProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
 import { Resizable } from "re-resizable";
@@ -14,6 +17,10 @@ export interface IHandleProps extends HandleProps {
     category?: "configuration";
 }
 
+interface NodeContentHandleNextProps extends HandleNextProps {
+    category?: "configuration";
+}
+
 export type NodeDimensions = {
     width: number;
     height: number;
@@ -26,13 +33,22 @@ interface NodeContentData<CONTENT_PROPS = any> {
      */
     iconName?: ValidIconName;
     /**
-     * Valid and accessible URL or `data-uri` for an image that should be displayed before the node label.
+     * Depiction element that should be displayed before the node label.
+     * As alternative a valid and accessible URL or `data-uri` for an image can be set, then the Depiction element is created automatically.
      */
-    depiction?: string;
+    depiction?: string | React.ReactElement<DepictionProps>;
+    /**
+     * Any element that should be displayed as depiction before the node label.
+     */
+    leftElement?: JSX.Element;
     /**
      * Label that is displayed in the node header.
      */
-    label: string;
+    label: string | JSX.Element;
+    /**
+     * Element that is displayed as subline under the label in the header.
+     */
+    labelSubline?: JSX.Element;
     /**
      * Content element, displayed in the node body.
      */
@@ -48,7 +64,7 @@ interface NodeContentData<CONTENT_PROPS = any> {
 }
 
 export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
-    extends NodeContentData,
+    extends NodeContentData, ReacFlowVersionSupportProps,
         React.HTMLAttributes<HTMLDivElement> {
     /**
      * Size of the node.
@@ -60,6 +76,16 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * If not set to `none` then the node is only displayed in normal size when it is selected.
      */
     minimalShape?: "none" | "circular" | "rectangular";
+    /**
+     * Stretches the node to the full available width.
+     */
+    fullWidth?: boolean;
+    /**
+     * Increase the hight of the node header.
+     * Use this for example if you need more space for a label subline.
+     * Also the depiction is displayed larger.
+     */
+    increadeHeader?: boolean;
     /**
      * Set the type of used highlights to mark the node.
      */
@@ -90,7 +116,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * Array of property definition objects for `Handle` components that need to be created for the node.
      * @see https://reactflow.dev/docs/api/handle/
      */
-    handles?: IHandleProps[];
+    handles?: IHandleProps[] | NodeContentHandleNextProps[];
     /**
      * Set the minimal number of handles on left or right side of the node to activate the recalculation of the minimal height of the node.
      */
@@ -153,14 +179,33 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
     nodeDimensions?: NodeDimensions;
 }
 
-interface MemoHandlerProps extends HandleProps {
+interface MemoHandlerLegacyProps extends HandleProps {
+    posdirection: string;
+    style: {
+        [key: string]: string | undefined;
+    };
+}
+
+interface MemoHandlerNextProps extends HandleNextProps {
     posdirection: string;
     style: {
         [key: string]: string | undefined;
     };
 }
 
-const defaultHandles = [{ type: "target" }, { type: "source" }] as IHandleProps[];
+type MemoHandlerProps = MemoHandlerLegacyProps | MemoHandlerNextProps;
+
+const defaultHandles = () => {
+    const flowVersion = useReactFlowVersion();
+    switch (flowVersion) {
+        case "legacy":
+            return [{ type: "target" }, { type: "source" }] as IHandleProps[];
+        case "next":
+            return [{ type: "target" }, { type: "source" }] as NodeContentHandleNextProps[];
+        default:
+            return [];
+    }
+}
 
 const getDefaultMinimalTooltipData = (node: any) => {
     return {
@@ -171,7 +216,7 @@ const getDefaultMinimalTooltipData = (node: any) => {
     };
 };
 
-const addHandles = (handles: any, position: any, posDirection: any, isConnectable: any, nodeStyle: any) => {
+const addHandles = (handles: any, position: any, posDirection: any, isConnectable: any, nodeStyle: any, flowVersion: any = "legacy") => {
     return handles[position].map((handle: any, idx: any) => {
         const { className, style = {}, category } = handle;
         const styleAdditions: { [key: string]: string } = {
@@ -191,22 +236,10 @@ const addHandles = (handles: any, position: any, posDirection: any, isConnectabl
                     : className,
             },
         };
-        return <MemoHandler {...handleProperties} key={"handle" + idx} />;
+        return <MemoHandler flowVersion={flowVersion} {...handleProperties} key={"handle" + idx} />;
     });
 };
 
-const imgWithTooltip = (imgEl: any, tooltipText: any) => {
-    if (!!tooltipText) {
-        return (
-            <Tooltip content={tooltipText}>
-                <span>{imgEl}</span>
-            </Tooltip>
-        );
-    }
-
-    return imgEl;
-};
-
 export const gethighlightedStateClasses = (state: any, baseClassName: any) => {
     let hightlights = typeof state === "string" ? [state] : state;
     //@ts-ignore
@@ -226,20 +259,25 @@ const MemoHandler = React.memo(
  * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
  */
 export function NodeContent<CONTENT_PROPS = any>({
+    flowVersion = useReactFlowVersion(),
     iconName,
     depiction,
+    leftElement,
     typeLabel,
     label,
+    labelSubline,
+    increadeHeader,
+    fullWidth,
     showExecutionButtons = true,
     executionButtons,
     menuButtons,
     content,
     contentExtension,
-     footerContent,
+    footerContent,
     size = "small",
     minimalShape = "circular",
     highlightedState,
-    handles = defaultHandles,
+    handles = defaultHandles(),
     adaptHeightForHandleMinCount,
     adaptSizeIncrement = 15,
     getMinimalTooltipData = getDefaultMinimalTooltipData,
@@ -259,16 +297,22 @@ export function NodeContent<CONTENT_PROPS = any>({
     // other props for DOM element
     ...otherProps
 }: NodeContentProps<any>) {
+    const isResizeable = (!!onNodeResize && minimalShape === "none");
     const [width, setWidth] = React.useState<number>(nodeDimensions?.width ?? 0);
     const [height, setHeight] = React.useState<number>(nodeDimensions?.height ?? 0);
-    const [, , zoom] = useStoreState((state) => state.transform);
+    let zoom = 1;
+    if (isResizeable) try {
+        [, , zoom] = flowVersion === "legacy"
+            ? useStoreStateFlowLegacy((state) => state.transform)
+            : useStoreStateFlowNext((state) => state.transform);
+    } catch {}
     const [adjustedContentProps, setAdjustedContentProps] = React.useState<Partial<CONTENT_PROPS>>({});
     const nodeContentRef = React.useRef<any>();
-    const handleStack: { [key: string]: IHandleProps[] } = {};
-    handleStack[Position.Top] = [] as IHandleProps[];
-    handleStack[Position.Right] = [] as IHandleProps[];
-    handleStack[Position.Bottom] = [] as IHandleProps[];
-    handleStack[Position.Left] = [] as IHandleProps[];
+    const handleStack = flowVersion==="legacy" ? {} as { [key: string]: IHandleProps[] } : {} as { [key: string]: NodeContentHandleNextProps[] };
+    handleStack[Position.Top] = flowVersion==="legacy" ? [] as IHandleProps[] : [] as NodeContentHandleNextProps[];
+    handleStack[Position.Right] = flowVersion==="legacy" ? [] as IHandleProps[] : [] as NodeContentHandleNextProps[];
+    handleStack[Position.Bottom] = flowVersion==="legacy" ? [] as IHandleProps[] : [] as NodeContentHandleNextProps[];
+    handleStack[Position.Left] = flowVersion==="legacy" ? [] as IHandleProps[] : [] as NodeContentHandleNextProps[];
 
     // initial dimension before resize
     React.useEffect(() => {
@@ -333,6 +377,7 @@ export function NodeContent<CONTENT_PROPS = any>({
                     `${eccgui}-graphviz__node` +
                     ` ${eccgui}-graphviz__node--${size}` +
                     ` ${eccgui}-graphviz__node--minimal-${minimalShape}` +
+                    (fullWidth ? ` ${eccgui}-graphviz__node--fullwidth` : "") +
                     (!!highlightedState
                         ? " " + gethighlightedStateClasses(highlightedState, `${eccgui}-graphviz__node`)
                         : "") +
@@ -341,32 +386,66 @@ export function NodeContent<CONTENT_PROPS = any>({
                     (letPassWheelEvents === false ? ` nowheel` : "")
                 }
             >
-                <header className={`${eccgui}-graphviz__node__header`}>
-                    {(!!iconName || !!depiction) && (
-                        <span className={`${eccgui}-graphviz__node__header-depiction`}>
-                            {!!depiction &&
-                                imgWithTooltip(
-                                    <img src={depiction} alt="" />,
-                                    minimalShape === "none" || selected ? typeLabel : undefined
-                                )}
-                            {!!iconName && !depiction && (
-                                <Icon
-                                    name={iconName}
-                                    tooltipText={minimalShape === "none" || selected ? typeLabel : undefined}
+                <header className={
+                    `${eccgui}-graphviz__node__header` +
+                    ((increadeHeader && minimalShape==="none") ? ` ${eccgui}-graphviz__node__header--large` : "")
+                }>
+                    {(!!iconName || !!depiction || !!leftElement) && (
+                        <div className={`${eccgui}-graphviz__node__header-depiction`}>
+                            { leftElement }
+                            {!!depiction && !leftElement && typeof depiction === "string" && (
+                                <Depiction
+                                    image={<img src={depiction} alt="" />}
+                                    caption={minimalShape === "none" || selected ? typeLabel : undefined}
+                                    captionPosition="tooltip"
+                                    padding="tiny"
+                                    ratio="1:1"
+                                    resizing="contain"
+                                    forceInlineSvg
                                 />
                             )}
-                        </span>
+                            {!!depiction && !leftElement && typeof depiction !== "string" && (
+                                React.cloneElement(depiction, {
+                                    caption: minimalShape === "none" || selected ? typeLabel : undefined,
+                                    captionPosition: "tooltip",
+                                    padding: "tiny",
+                                    ratio: "1:1",
+                                    resizing: "contain",
+                                    forceInlineSvg: true,
+                                })
+                            )}
+                            {!!iconName && !leftElement && !depiction && (
+                                <Depiction
+                                    image={<Icon name={iconName} />}
+                                    caption={minimalShape === "none" || selected ? typeLabel : undefined}
+                                    captionPosition="tooltip"
+                                    padding="tiny"
+                                    ratio="1:1"
+                                    resizing="contain"
+                                    forceInlineSvg
+                                />
+                            )}
+                        </div>
                     )}
-                    <span className={`${eccgui}-graphviz__node__header-label`} title={label}>
-                        {label}
-                    </span>
+                    <div className={`${eccgui}-graphviz__node__header-label`} title={typeof label==="string" ? label : undefined}>
+                        {
+                            typeof label === "string"
+                                ? <OverflowText className={`${eccgui}-graphviz__node__header-label__mainline`}>{label}</OverflowText>
+                                : <div className={`${eccgui}-graphviz__node__header-label__mainline`}>{label}</div>
+                        }
+                        {!!labelSubline && (
+                            <div className={`${eccgui}-graphviz__node__header-label__subline`}>
+                                { labelSubline }
+                            </div>
+                        )}
+                    </div>
                     {(menuButtons || (showExecutionButtons && executionButtons)) && (
-                        <span className={`${eccgui}-graphviz__node__header-menu`}>
+                        <div className={`${eccgui}-graphviz__node__header-menu`}>
                             {showExecutionButtons && typeof executionButtons === "function"
                                 ? executionButtons(adjustedContentProps, setAdjustedContentProps)
                                 : null}
                             {menuButtons ?? null}
-                        </span>
+                        </div>
                     )}
                 </header>
                 {content && (
@@ -383,10 +462,10 @@ export function NodeContent<CONTENT_PROPS = any>({
             </section>
             {!!handles && (
                 <>
-                    {addHandles(handleStack, Position.Top, "left", isConnectable, style)}
-                    {addHandles(handleStack, Position.Right, "top", isConnectable, style)}
-                    {addHandles(handleStack, Position.Bottom, "left", isConnectable, style)}
-                    {addHandles(handleStack, Position.Left, "top", isConnectable, style)}
+                    {addHandles(handleStack, Position.Top, "left", isConnectable, style, flowVersion)}
+                    {addHandles(handleStack, Position.Right, "top", isConnectable, style, flowVersion)}
+                    {addHandles(handleStack, Position.Bottom, "left", isConnectable, style, flowVersion)}
+                    {addHandles(handleStack, Position.Left, "top", isConnectable, style, flowVersion)}
                 </>
             )}
         </>
@@ -419,5 +498,5 @@ export function NodeContent<CONTENT_PROPS = any>({
         </Resizable>
     );
 
-    return (!!onNodeResize && minimalShape === "none") ? resizableNode() : nodeContent;
+    return (isResizeable) ? resizableNode() : nodeContent;
 }

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

@@ -5,8 +5,9 @@ import {
 } from "react-flow-renderer";
 import { Tooltip } from "../../../index";
 import { NodeContent, NodeContentProps } from "./NodeContent";
+import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
-export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReactFlowNodeProps {
+export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlowVersionSupportProps, ReactFlowNodeProps {
     /**
      * Contains all properties for our implementation of the React-Flow node.
      * For details pls see the `NodeContent` element documentation.
@@ -22,6 +23,7 @@ export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReactFlo
 export const NodeDefault = memo(
     (node: NodeProps<any>) => {
         const {
+            flowVersion = useReactFlowVersion(),
             data,
             targetPosition = Position.Left,
             sourcePosition = Position.Right,
@@ -29,7 +31,7 @@ export const NodeDefault = memo(
             selected
         } = node;
 
-        const nodeEl = <NodeContent {...{...data, targetPosition, sourcePosition, isConnectable, selected}} />
+        const nodeEl = <NodeContent {...{flowVersion, ...data, targetPosition, sourcePosition, isConnectable, selected}} />
 
         if (!selected && data?.minimalShape !== "none" && !!data?.getMinimalTooltipData) {
             const tooltipData = data?.getMinimalTooltipData(node);

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

@@ -120,22 +120,20 @@
     }
 }
 
+.#{$eccgui}-graphviz__node__header--large {
+    min-height: $reactflow-node-largesize;
+}
+
 .#{$eccgui}-graphviz__node__header-depiction,
 .#{$eccgui}-graphviz__node__header-menu {
     flex-grow: 0;
     flex-shrink: 0;
     max-height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
-}
-
-.#{$eccgui}-graphviz__node__header-label {
     margin: 0 $eccgui-size-block-whitespace * 0.25;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex-grow: 1;
-    flex-shrink: 1;
-    display: inline-block;
-    text-align: left;
+
+    .#{$eccgui}-graphviz__node__header--large & {
+        max-height: calc(#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width});
+    }
 }
 
 .#{$eccgui}-graphviz__node__header-depiction {
@@ -151,16 +149,53 @@
     justify-content: center;
     align-items: center;
 
-    img {
-        max-width: calc(2 * (#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width}));
-        max-height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
-        height: auto;
-        width: auto;
-        display: inline-block;
-        pointer-events: none;
+    & .#{$eccgui}-depiction {
+        flex-grow: 0;
+        flex-shrink: 0;
+        align-self: stretch;
+
+        /*
+        Fix for Firefox,
+        the width of .#{$eccgui}-depiction container is not reduced to its content
+        when .#{$eccgui}-depiction__image updated to the available height.
+        */
+        .#{$eccgui}-depiction__image {
+            height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
+        }
+    }
+
+    .#{$eccgui}-graphviz__node__header--large & {
+        min-width: calc(#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width});
+        min-height: calc(#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width});
+        max-width: calc(2 * (#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width}));
+
+        .#{$eccgui}-depiction__image {
+            height: calc(#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width});
+        }
     }
 }
 
+.#{$eccgui}-graphviz__node__header-label {
+    margin: 0 $eccgui-size-block-whitespace * 0.25;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+    flex-shrink: 1;
+    display: inline-flex;
+    flex-direction: column;
+    text-align: left;
+}
+
+.#{$eccgui}-graphviz__node__header-label__mainline,
+.#{$eccgui}-graphviz__node__header-label__subline {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
 .#{$eccgui}-graphviz__node__content {
     padding: $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.25;
     overflow: hidden;
@@ -225,6 +260,10 @@
     max-height: $reactflow-node-basesize * 13;
 }
 
+.#{$eccgui}-graphviz__node--fullwidth:not(.is-resizeable) {
+    width: 100%;
+}
+
 // Node highlights
 
 .#{$eccgui}-graphviz__node--highlight-success,

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

@@ -1,11 +1,18 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
+import { LoremIpsum, loremIpsum } from 'react-lorem-ipsum';
 import ReactFlow, { Elements, ReactFlowProvider } from 'react-flow-renderer';
 import {
+    Badge,
+    ContextMenu,
+    MenuItem,
     OverflowText,
     HtmlContentBlock,
+    IconButton,
+    Tag,
+    TagList,
 } from "./../../../../index";
+import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
 
 import { NodeContent } from "./../NodeContent";
 import { nodeTypes } from "./../nodeTypes";
@@ -29,6 +36,35 @@ export default {
                 "Slide out example": <NodeContentExtension {...ContentExtensionExampleSlideOut.args} />,
             },
         },
+        labelSubline: {
+            control: "select",
+            options: ["Not set", "Text string", "OverflowText element", "Tag list"],
+            mapping: {
+                "Not set": undefined,
+                "Text string": loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString(),
+                "OverflowText element": <OverflowText>{loremIpsum({ p: 1, avgSentencesPerParagraph: 2, avgWordsPerSentence: 4, random: false }).toString()}</OverflowText>,
+                "Tag list": <TagList>{
+                    loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 5, random: false })
+                    .toString()
+                    .split(" ")
+                    .map((term) => <Tag small>{term}</Tag>)
+                }</TagList>
+            },
+        },
+        menuButtons: {
+            control: "select",
+            options: ["Not set", "Icon button", "Context Menu", "Info badge"],
+            mapping: {
+                "Not set": undefined,
+                "Icon button": <IconButton name="item-info" text="Icon button" onClick={()=>alert("Click info")} />,
+                "Context Menu": <ContextMenu><MenuItem text="Context menu" /></ContextMenu>,
+                "Info badge": <Badge intent="info">Info</Badge>,
+            },
+        },
+        iconName: {
+            control: "select",
+            options: [...(Object.keys(canonicalIcons))],
+        },
         content: { control: "none" },
         footerContent: { control: "none" },
         isConnectable: { table: { disable: true } },

package/src/extensions/react-flow/versionsupport.ts

@@ -0,0 +1,22 @@
+import { useStoreState as useStoreStateFlowLegacy } from "react-flow-renderer";
+import { useStore as useStoreStateFlowNext } from "react-flow-renderer-lts";
+
+export interface ReacFlowVersionSupportProps {
+    /**
+     * Spevifies the context of the react flow renderer version that is used for the component.
+     */
+    flowVersion?: "legacy" | "next" | "none";
+}
+
+export const useReactFlowVersion = () => {
+    try {
+        const [, , zoom] = useStoreStateFlowLegacy((state) => state.transform);
+        return !!zoom ? "legacy" : "none";
+    } catch {}
+    try {
+        const [, , zoom] = useStoreStateFlowNext((state) => state.transform);
+        return !!zoom ? "next" : "none";
+    } catch {}
+
+    return "none";
+}

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

@@ -0,0 +1,11 @@
+/*
+    FIXME:
+    it's probably not necessary to include those elements because they should be included by
+    the Carbon components itself when they are necessary as sub components. We may remove this
+    file later when we haven't experiences any problems.
+*/
+// @use "~@carbon/styles/scss/components/select/index" as select;
+// @use "~@carbon/styles/scss/components/list-box/index" as list-box;
+// @use "~@carbon/styles/scss/components/dropdown/index" as dropdown;
+
+@use "~@carbon/styles/scss/components/popover/index" as popover; // necessary for pagination

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

@@ -0,0 +1,18 @@
+@use "~@carbon/styles/scss/config" with (
+    $css--body: $css--body,
+    $css--font-face: $css--font-face,
+    $css--reset: $css--reset,
+    $css--default-type: $css--default-type,
+    $prefix: $prefix,
+    $flex-grid-columns: $flex-grid-columns,
+    $use-flexbox-grid: $use-flexbox-grid
+);
+@use "~@carbon/styles/scss/utilities/_visually-hidden";
+@import "~@carbon/styles/scss/feature-flags";
+@import "~@carbon/styles/scss/colors";
+@import "~@carbon/styles/scss/theme";
+:root {
+    @include theme;
+}
+@import "~@carbon/styles/scss/spacing";
+@import "~@carbon/styles/scss/utilities/z-index";