@eccenca/gui-elements 25.0.0 → 25.1.0-changeupgradedtoreact18cmem6639.0

package/src/extensions/codemirror/_codemirror.scss

@@ -19,13 +19,13 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
 
     &__toolbar {
         position: absolute;
-        z-index: 3;
-        left: 1px;
-        right: 1px;
         top: 1px;
-        border-radius: $pt-border-radius $pt-border-radius 0 0;
-        border-bottom: solid 1px $eccgui-color-codeeditor-separation;
+        right: 1px;
+        left: 1px;
+        z-index: 3;
         background-color: $eccgui-color-codeeditor-background;
+        border-bottom: solid 1px $eccgui-color-codeeditor-separation;
+        border-radius: $pt-border-radius $pt-border-radius 0 0;
     }
 
     &--has-toolbar {
@@ -37,9 +37,9 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
     &__preview {
         position: absolute;
         top: calc(#{$eccgui-size-codeeditor-toolbar-height} + 1px) !important;
-        left: 1px;
         right: 1px;
         bottom: 1px;
+        left: 1px;
         z-index: 2;
         padding: $button-padding;
         overflow-y: auto;
@@ -50,12 +50,12 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
     .cm-editor {
         width: 100%;
         height: $eccgui-size-codeeditor-height;
-        clip-path: unset !important; // we may check later why they set inset(0) now
         background-color: $eccgui-color-codeeditor-background;
         border-radius: $pt-border-radius;
 
         // get them a "border" like input boxes from blueprintjs
         box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;
+        clip-path: unset !important; // we may check later why they set inset(0) now
 
         &.#{eccgui}-disabled {
             @extend .#{$ns}-input, .#{$ns}-disabled;
@@ -89,7 +89,7 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
         }
 
         &.#{eccgui}-intent--primary {
-            @include pt-input-intent($eccgui-color-info-text);
+            @include pt-input-intent($eccgui-color-primary);
         }
 
         &.#{eccgui}-intent--info {
@@ -97,7 +97,7 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
         }
 
         &.#{eccgui}-intent--accent {
-            @include pt-input-intent($eccgui-color-primary);
+            @include pt-input-intent($eccgui-color-accent);
         }
 
         &.#{eccgui}-intent--neutral {
@@ -124,39 +124,29 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
         }
 
         &.cm-focused {
-            outline: none;
-            box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
+            --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
+            --#{$eccgui}-a11y-outline-offset: 0;
+
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
 
             &.#{eccgui}-intent--warning {
-                box-shadow: input-transition-shadow($eccgui-color-warning-text, true), $input-box-shadow-focus;
+                --#{$eccgui}-a11y-outline-color: #{$eccgui-color-warning-text};
             }
 
             &.#{eccgui}-intent--success {
-                box-shadow: input-transition-shadow($eccgui-color-success-text, true), $input-box-shadow-focus;
+                --#{$eccgui}-a11y-outline-color: #{$eccgui-color-success-text};
             }
 
             &.#{eccgui}-intent--danger {
-                box-shadow: input-transition-shadow($eccgui-color-danger-text, true), $input-box-shadow-focus;
+                --#{$eccgui}-a11y-outline-color: #{$eccgui-color-danger-text};
             }
 
             &.#{eccgui}-intent--primary {
-                box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
+                --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary};
             }
 
             &.#{eccgui}-intent--info {
-                box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
-            }
-
-            &.#{eccgui}-intent--accent {
-                box-shadow: input-transition-shadow($eccgui-color-warning-text, true), $input-box-shadow-focus;
-            }
-
-            &.#{eccgui}-intent--neutral {
-                box-shadow: input-transition-shadow($eccgui-color-workspace-text, true), $input-box-shadow-focus;
-            }
-
-            &.#{eccgui}-intent--edited {
-                box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
+                --#{$eccgui}-a11y-outline-color: #{$eccgui-color-info-text};
             }
 
             &.#{eccgui}-intent--removed {

package/src/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.ts

@@ -1,12 +1,11 @@
 //adapted v6 modes imports
+import {html} from "@codemirror/lang-html"
 import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
 import { markdown } from "@codemirror/lang-markdown";
 import { sql } from "@codemirror/lang-sql";
 import { xml } from "@codemirror/lang-xml";
 import { yaml } from "@codemirror/lang-yaml";
-import {html} from "@codemirror/lang-html"
-
 import { defaultHighlightStyle, LanguageSupport, StreamLanguage, StreamParser } from "@codemirror/language";
 //legacy mode imports
 import { jinja2 } from "@codemirror/legacy-modes/mode/jinja2";

package/src/extensions/codemirror/tests/CodeEditor.test.tsx

@@ -0,0 +1,138 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { CodeEditor } from "../CodeMirror";
+
+const contextOverlayClass = `${eccgui}-contextoverlay`;
+
+const setupDocumentRange = () => {
+    document.createRange = () => {
+        const range = new Range();
+        range.getBoundingClientRect = jest.fn();
+        range.getClientRects = () => ({
+            item: () => null,
+            length: 0,
+            [Symbol.iterator]: jest.fn(),
+        });
+        return range;
+    };
+};
+
+describe("CodeEditor - markdown mode with toolbar", () => {
+    beforeAll(() => {
+        setupDocumentRange();
+    });
+
+    // The toolbar contains a Paragraphs ContextMenu first, then the EditorAppearanceConfigMenu last.
+    const getConfigMenuOverlay = (container: HTMLElement) => {
+        const overlays = container.getElementsByClassName(contextOverlayClass);
+        return overlays[overlays.length - 1] as HTMLElement;
+    };
+
+    it("renders toolbar when mode is markdown and useToolbar is true", () => {
+        const { container } = render(<CodeEditor name="test-editor" mode="markdown" useToolbar={true} />);
+        expect(container.querySelector(`.${eccgui}-codeeditor__toolbar`)).not.toBeNull();
+    });
+
+    it("does not render toolbar when useToolbar is false", () => {
+        const { container } = render(<CodeEditor name="test-editor" mode="markdown" useToolbar={false} />);
+        expect(container.querySelector(`.${eccgui}-codeeditor__toolbar`)).toBeNull();
+    });
+
+    it("does not render toolbar for non-markdown modes even when useToolbar is true", () => {
+        const { container } = render(<CodeEditor name="test-editor" mode="yaml" useToolbar={true} />);
+        expect(container.querySelector(`.${eccgui}-codeeditor__toolbar`)).toBeNull();
+    });
+
+    it("includes the EditorAppearanceConfigMenu in the markdown toolbar", () => {
+        const { container } = render(<CodeEditor name="test-editor" mode="markdown" useToolbar={true} />);
+        const toolbar = container.querySelector(`.${eccgui}-codeeditor__toolbar`);
+        // Toolbar contains at least the Paragraphs menu and the EditorAppearanceConfigMenu
+        expect(toolbar?.getElementsByClassName(contextOverlayClass).length).toBeGreaterThanOrEqual(2);
+    });
+
+    it("defaults wrapLines to true in markdown mode with toolbar", async () => {
+        const { container } = render(<CodeEditor name="test-editor" mode="markdown" useToolbar={true} />);
+
+        fireEvent.click(getConfigMenuOverlay(container));
+
+        const wrapLinesItem = await screen.findByText("wrapLines");
+        expect(wrapLinesItem.closest("[aria-selected='true']")).not.toBeNull();
+    });
+
+    it("defaults preventLineNumbers to true in markdown mode with toolbar", async () => {
+        const { container } = render(<CodeEditor name="test-editor" mode="markdown" useToolbar={true} />);
+
+        fireEvent.click(getConfigMenuOverlay(container));
+
+        const preventLineNumbersItem = await screen.findByText("preventLineNumbers");
+        expect(preventLineNumbersItem.closest("[aria-selected='true']")).not.toBeNull();
+    });
+
+    it("locks wrapLines in config menu when wrapLines prop is explicitly provided", async () => {
+        const { container } = render(
+            <CodeEditor name="test-editor" mode="markdown" useToolbar={true} wrapLines={false} />
+        );
+
+        fireEvent.click(getConfigMenuOverlay(container));
+
+        const wrapLinesItem = await screen.findByText("wrapLines");
+        expect(wrapLinesItem.closest("[aria-disabled='true']")).not.toBeNull();
+    });
+
+    it("locks preventLineNumbers in config menu when preventLineNumbers prop is explicitly provided", async () => {
+        const { container } = render(
+            <CodeEditor name="test-editor" mode="markdown" useToolbar={true} preventLineNumbers={false} />
+        );
+
+        fireEvent.click(getConfigMenuOverlay(container));
+
+        const preventLineNumbersItem = await screen.findByText("preventLineNumbers");
+        expect(preventLineNumbersItem.closest("[aria-disabled='true']")).not.toBeNull();
+    });
+
+    it("does not lock wrapLines in config menu when wrapLines prop is not provided", async () => {
+        const { container } = render(<CodeEditor name="test-editor" mode="markdown" useToolbar={true} />);
+
+        fireEvent.click(getConfigMenuOverlay(container));
+
+        const wrapLinesItem = await screen.findByText("wrapLines");
+        expect(wrapLinesItem.closest("[aria-disabled='true']")).toBeNull();
+    });
+
+    it("does not lock preventLineNumbers in config menu when preventLineNumbers prop is not provided", async () => {
+        const { container } = render(<CodeEditor name="test-editor" mode="markdown" useToolbar={true} />);
+
+        fireEvent.click(getConfigMenuOverlay(container));
+
+        const preventLineNumbersItem = await screen.findByText("preventLineNumbers");
+        expect(preventLineNumbersItem.closest("[aria-disabled='true']")).toBeNull();
+    });
+
+    it("disables config menu trigger when both wrapLines and preventLineNumbers props are provided", () => {
+        const { container } = render(
+            <CodeEditor
+                name="test-editor"
+                mode="markdown"
+                useToolbar={true}
+                wrapLines={true}
+                preventLineNumbers={true}
+            />
+        );
+
+        const configMenuTrigger = getConfigMenuOverlay(container).querySelector("button");
+        expect(configMenuTrigger).toBeDisabled();
+    });
+
+    it("disables config menu trigger when editor is disabled", () => {
+        const { container } = render(
+            <CodeEditor name="test-editor" mode="markdown" useToolbar={true} disabled={true} />
+        );
+
+        const configMenuTrigger = getConfigMenuOverlay(container).querySelector("button");
+        expect(configMenuTrigger).toBeDisabled();
+    });
+});

package/src/extensions/codemirror/tests/EditorAppearanceConfigMenu.test.tsx

@@ -0,0 +1,131 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { EditorAppearanceConfigMenu } from "../toolbars/EditorAppearanceConfigMenu";
+
+const contextOverlayClass = `${eccgui}-contextoverlay`;
+
+describe("EditorAppearanceConfigMenu", () => {
+    it("renders menu items for each config property, using key as fallback label", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const setConfig = jest.fn();
+
+        const { container } = render(<EditorAppearanceConfigMenu config={config} setConfig={setConfig} />);
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        expect(await screen.findByText("wrapLines")).toBeVisible();
+        expect(await screen.findByText("preventLineNumbers")).toBeVisible();
+    });
+
+    it("uses configPropertyTranslate for menu item labels", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const setConfig = jest.fn();
+        const translate = (key: string) => `Label_${key}` as string | false;
+
+        const { container } = render(
+            <EditorAppearanceConfigMenu config={config} setConfig={setConfig} configPropertyTranslate={translate} />
+        );
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        expect(await screen.findByText("Label_wrapLines")).toBeVisible();
+        expect(await screen.findByText("Label_preventLineNumbers")).toBeVisible();
+    });
+
+    it("calls setConfig with the toggled value when a menu item is clicked", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const setConfig = jest.fn();
+
+        const { container } = render(<EditorAppearanceConfigMenu config={config} setConfig={setConfig} />);
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+        const wrapLinesItem = await screen.findByText("wrapLines");
+        fireEvent.click(wrapLinesItem);
+
+        expect(setConfig).toHaveBeenCalledWith({ wrapLines: false, preventLineNumbers: false });
+    });
+
+    it("menu trigger is disabled when all config properties are locked", () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const configLocked = { wrapLines: true, preventLineNumbers: true };
+        const setConfig = jest.fn();
+
+        const { container } = render(
+            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />
+        );
+
+        const trigger = container.getElementsByClassName(contextOverlayClass)[0].querySelector("button");
+        expect(trigger).toBeDisabled();
+    });
+
+    it("menu trigger is enabled when not all config properties are locked", () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const configLocked = { wrapLines: true }; // only one locked
+        const setConfig = jest.fn();
+
+        const { container } = render(
+            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />
+        );
+
+        const trigger = container.getElementsByClassName(contextOverlayClass)[0].querySelector("button");
+        expect(trigger).not.toBeDisabled();
+    });
+
+    it("locked config property has a disabled menu item", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const configLocked = { wrapLines: true };
+        const setConfig = jest.fn();
+
+        const { container } = render(
+            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />
+        );
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        const wrapLinesItem = await screen.findByText("wrapLines");
+        expect(wrapLinesItem.closest("[aria-disabled='true']")).not.toBeNull();
+    });
+
+    it("unlocked config property has an enabled menu item", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const configLocked = { wrapLines: true }; // only wrapLines is locked
+        const setConfig = jest.fn();
+
+        const { container } = render(
+            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />
+        );
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        const preventLineNumbersItem = await screen.findByText("preventLineNumbers");
+        expect(preventLineNumbersItem.closest("[aria-disabled='true']")).toBeNull();
+    });
+
+    it("selected config property is marked as selected in the menu", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const setConfig = jest.fn();
+
+        const { container } = render(<EditorAppearanceConfigMenu config={config} setConfig={setConfig} />);
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        const wrapLinesItem = await screen.findByText("wrapLines");
+        expect(wrapLinesItem.closest("[aria-selected='true']")).not.toBeNull();
+    });
+
+    it("unselected config property is not marked as selected in the menu", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const setConfig = jest.fn();
+
+        const { container } = render(<EditorAppearanceConfigMenu config={config} setConfig={setConfig} />);
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        const preventLineNumbersItem = await screen.findByText("preventLineNumbers");
+        expect(preventLineNumbersItem.closest("[aria-selected='true']")).toBeNull();
+    });
+});

package/src/extensions/codemirror/tests/codemirrorTestHelper.ts

@@ -7,10 +7,10 @@
  */
 //Todo this should become redundant with later patches that avoid this error
 
-import { EditorView, placeholder, highlightSpecialChars, lineNumbers, highlightActiveLine } from "@codemirror/view";
-import { syntaxHighlighting, foldGutter, codeFolding } from "@codemirror/language";
-import {Extension, Compartment, StateEffect, EditorState} from "@codemirror/state";
+import { codeFolding,foldGutter, syntaxHighlighting } from "@codemirror/language";
 import { lintGutter } from "@codemirror/lint";
+import {Compartment, EditorState,Extension, StateEffect} from "@codemirror/state";
+import { EditorView, highlightActiveLine,highlightSpecialChars, lineNumbers, placeholder } from "@codemirror/view";
 
 /** placeholder extension, current error '_view.placeholder is not a function' */
 export const adaptedPlaceholder = (text?: string) =>

package/src/extensions/codemirror/toolbars/EditorAppearanceConfigMenu.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+import { ContextMenu, ContextMenuProps, MenuItem } from "../../../components";
+
+export interface EditorAppearanceConfigMenuProps {
+    /** Object containing a `true`/`false` value for each property */
+    config: { [s: string]: boolean };
+    /** Object containing `true` for each property that cannot be changed by user */
+    configLocked?: { [s: string]: boolean | undefined };
+    /** Handler that returns a translation for each config property key */
+    configPropertyTranslate?: (key: string) => string | false;
+    /** Handler to update config after user changes */
+    setConfig: React.Dispatch<React.SetStateAction<{ [s: string]: boolean }>>;
+    /** Additional properties used for the included `ContextMenu` */
+    contextMenuProps?: ContextMenuProps;
+}
+
+/**
+ * Returns a simple context menu that provides switches to control the editor appearance.
+ */
+export function EditorAppearanceConfigMenu({
+    config,
+    configLocked = {},
+    configPropertyTranslate = (s) => s,
+    setConfig,
+    contextMenuProps,
+}: EditorAppearanceConfigMenuProps) {
+    return (
+        <ContextMenu
+            togglerElement={"item-settings"}
+            {...contextMenuProps}
+            disabled={
+                contextMenuProps?.disabled ??
+                Object.values(config).length ===
+                    Object.values(configLocked).filter((value) => {
+                        return typeof value !== "undefined";
+                    }).length
+            }
+        >
+            {Object.entries(config).map(([key, value]) => {
+                return (
+                    <MenuItem
+                        key={key}
+                        roleStructure={"listoption"}
+                        selected={value}
+                        text={configPropertyTranslate(key) || key}
+                        disabled={typeof configLocked[key] !== "undefined"}
+                        onClick={() => {
+                            setConfig({
+                                ...config,
+                                [key]: !value,
+                            });
+                        }}
+                    />
+                );
+            })}
+        </ContextMenu>
+    );
+}

package/src/extensions/codemirror/toolbars/markdown.toolbar.tsx

@@ -9,6 +9,7 @@ import { Spacing } from "../../../components/Separation/Spacing";
 import { Toolbar, ToolbarSection } from "../../../components/Toolbar";
 
 import MarkdownCommand from "./commands/markdown.command";
+import { EditorAppearanceConfigMenu } from "./EditorAppearanceConfigMenu";
 
 interface MarkdownToolbarProps {
     view?: EditorView;
@@ -17,6 +18,7 @@ interface MarkdownToolbarProps {
     translate: (key: string) => string | false;
     disabled?: boolean;
     readonly?: boolean;
+    configMenu?: React.ReactElement<typeof EditorAppearanceConfigMenu>;
 }
 
 export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
@@ -25,7 +27,8 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
     showPreview,
     disabled,
     readonly,
-    translate
+    translate,
+    configMenu,
 }) => {
     const commandRef = React.useRef<MarkdownCommand | null>(null);
 
@@ -35,10 +38,10 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
         }
     }, [view]);
 
-    const getTranslation = (fallback: string) : string => {
+    const getTranslation = (fallback: string): string => {
         const key = fallback.toLowerCase().replace(" ", "-");
         return translate(key) || fallback;
-    }
+    };
 
     const { basic, lists, attachments } = MarkdownCommand.commands;
     return (
@@ -112,6 +115,17 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
                     disabled={disabled}
                 />
             </ToolbarSection>
+            {configMenu && (
+                <ToolbarSection>
+                    <Spacing vertical size="small" hasDivider />
+                    {React.cloneElement(configMenu, {
+                        ...{
+                            ...configMenu.props,
+                            contextMenuProps: { disabled: showPreview || disabled ? true : undefined },
+                        },
+                    })}
+                </ToolbarSection>
+            )}
         </Toolbar>
     );
 };

package/src/extensions/react-flow/_config.scss

@@ -8,9 +8,9 @@ $reactflow-node-font-size: $eccgui-size-typo-caption !default;
 $reactflow-node-border-width: 2 * $button-border-width !default;
 $reactflow-node-border-radius: $button-border-radius !default;
 $reactflow-edge-rendering: geometricprecision !default;
-$reactflow-edge-stroke-width-default: 2px !default;
-$reactflow-edge-stroke-width-hover: 2px !default;
-$reactflow-edge-stroke-width-selected: 2px !default;
+$reactflow-edge-stroke-width-default: 1px !default;
+$reactflow-edge-stroke-width-hover: 1px !default;
+$reactflow-edge-stroke-width-selected: 1px !default;
 $reactflow-edge-stroke-opacity-default: $eccgui-opacity-muted !default;
 $reactflow-edge-stroke-opacity-hover: $eccgui-opacity-narrow !default;
 $reactflow-edge-stroke-opacity-selected: $eccgui-opacity-regular !default;

package/src/extensions/react-flow/_react-flow_v12.scss

@@ -6,8 +6,8 @@
  */
 
 .react-flow {
-    direction: ltr;
     z-index: 0;
+    direction: ltr;
 }
 
 .react-flow__pane {

package/src/extensions/react-flow/edges/EdgeLabel.tsx

@@ -1,9 +1,11 @@
-import React, { memo } from "react";
+import React, {memo} from "react";
 
-import { intentClassName, IntentTypes } from "../../../common/Intent";
-import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { Depiction, DepictionProps, Icon, OverflowText } from "../../../index";
+import {intentClassName, IntentTypes} from "../../../common/Intent";
+import {ValidIconName} from "../../../components/Icon/canonicalIconNames";
+import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
+import {Depiction, DepictionProps} from "../../../components/Depiction/Depiction";
+import Icon from "../../../components/Icon/Icon";
+import OverflowText from "../../../components/Typography/OverflowText";
 
 export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -14,11 +16,11 @@ export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
      * Label of the edge.
      * Cannot overflow the parent container.
      */
-    text: string | JSX.Element;
+    text: string | React.JSX.Element;
     /**
      * One or multiple other elements displayed right from label.
      */
-    actions?: JSX.Element | JSX.Element[];
+    actions?: React.JSX.Element | React.JSX.Element[];
     /**
      * The element is increased in its size.
      */
@@ -81,9 +83,11 @@ export const EdgeLabel = memo(
                         })}
                     </div>
                 )}
-                <div className={`${eccgui}-graphviz__edge-label__text`} title={title}>
-                    {typeof text === "string" ? <OverflowText>{text}</OverflowText> : text}
-                </div>
+                {(title || text) && (
+                    <div className={`${eccgui}-graphviz__edge-label__text`} title={title??undefined}>
+                        {text && (typeof text === "string" ? <OverflowText>{text}</OverflowText> : text)}
+                    </div>
+                )}
                 {!!actions && <div className={`${eccgui}-graphviz__edge-label__aux`}>{actions}</div>}
             </div>
         );
@@ -109,7 +113,7 @@ export interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObje
 export const EdgeLabelObject = memo(
     ({ children, edgeCenter, resizeTimeout = -1, ...otherForeignObjectProps }: EdgeLabelObjectProps) => {
         const containerCallback = React.useCallback(
-            (containerRef) => {
+            (containerRef: SVGForeignObjectElement | null) => {
                 if (containerRef) labelSize(containerRef);
             },
             [edgeCenter]

package/src/extensions/react-flow/edges/EdgeNew.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import {
-    ConnectionLineComponentProps,
-    ConnectionLineType,
-} from "@xyflow/react";
-import { EdgeStraight, EdgeStep, EdgeBezier, EdgeDefaultV12Props } from "./../index";
+import {ConnectionLineComponentProps, ConnectionLineType,} from "@xyflow/react";
 
-import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
+import {EdgeStep} from "./EdgeStep";
+import {EdgeStraight} from "./EdgeStraight";
+import {EdgeBezier} from "./EdgeBezier";
+import {EdgeDefaultV12Props} from "./EdgeDefaultV12";
 
 export const EdgeNew = (edgeNewProps: ConnectionLineComponentProps) => {
 

package/src/extensions/react-flow/edges/EdgeTools.tsx

@@ -1,10 +1,9 @@
-import React, { memo } from "react";
-import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
+import React, {memo} from "react";
+import {PopoverInteractionKind as BlueprintPopoverInteractionKind} from "@blueprintjs/core";
 
-import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { ContextOverlay } from "../../../index";
+import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
 
-import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
+import {ContextOverlay, ContextOverlayProps} from "./../../../components/ContextOverlay/ContextOverlay";
 
 interface PosOffset {
     left: number;
@@ -13,7 +12,7 @@ interface PosOffset {
 
 export interface EdgeToolsProps extends Omit<ContextOverlayProps, "children"> {
     posOffset: PosOffset;
-    children: string | JSX.Element | JSX.Element[];
+    children: string | React.JSX.Element | React.JSX.Element[];
 }
 
 export const EdgeTools = memo(({ posOffset, children, ...otherProps }: EdgeToolsProps) => {