@eccenca/gui-elements 23.3.0-rc.0 → 23.3.0-rc.1

package/dist/types/components/Table/TableExpandHeader.d.ts

@@ -1,13 +1,17 @@
 import React from "react";
 import { TableExpandHeaderProps as CarbonTableExpandHeaderProps } from "carbon-components-react";
+import { TestIconProps } from "../Icon";
+import { ValidIconName } from "../Icon/canonicalIconNames";
 export interface TableExpandHeaderProps extends Omit<CarbonTableExpandHeaderProps, "children" | "ariaLabel" | "enableExpando" | "expandIconDescription">, React.ThHTMLAttributes<HTMLTableCellElement> {
     /**
      * This text is displayed as tooltip for the button that toggles the expanded/collapsed state.
      */
     togglerText: string;
+    /** An optional icon that is shown as toggle icon. */
+    toggleIcon?: ValidIconName | string[] | React.ReactElement<TestIconProps>;
 }
 /**
  * Adds a button to the table header that can trigger a function to expand/collapse all rows of the table.
  */
-export declare function TableExpandHeader({ togglerText, isExpanded, onExpand, className, enableToggle, ...otherCarbonTableExpandHeaderProps }: TableExpandHeaderProps): React.JSX.Element;
+export declare function TableExpandHeader({ togglerText, isExpanded, onExpand, className, enableToggle, toggleIcon, ...otherCarbonTableExpandHeaderProps }: TableExpandHeaderProps): React.JSX.Element;
 export default TableExpandHeader;

package/dist/types/extensions/react-flow/edges/EdgeLabel.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { DepictionProps } from "../../../index";
-import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 import { IntentTypes } from "../../../common/Intent";
+import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
+import { DepictionProps } from "../../../index";
 export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Depiction element displayed left from the label.
@@ -24,12 +24,16 @@ export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
      * Stretches the label component to the full available width.
      */
     fullWidth?: boolean;
+    /**
+     * Label is diaplayed without a box that comes with borders and background color.
+     */
+    loose?: boolean;
     /**
      * Add a info state to the label, visualized by color.
      */
     intent?: IntentTypes;
 }
-export declare const EdgeLabel: React.MemoExoticComponent<({ depiction, text, actions, large, fullWidth, intent, title, ...otherDivProps }: EdgeLabelProps) => React.JSX.Element>;
+export declare const EdgeLabel: React.MemoExoticComponent<({ depiction, text, actions, large, fullWidth, loose, intent, title, ...otherDivProps }: EdgeLabelProps) => React.JSX.Element>;
 export interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObjectElement> {
     /**
      * The `<EdgeLabel />` element that need to be displayed.

package/dist/types/extensions/react-flow/handles/HandleContent.d.ts

@@ -1,9 +1,14 @@
-import React from 'react';
+import React from "react";
+import { TooltipProps } from "../../../index";
 export interface HandleContentProps {
     children?: JSX.Element | string;
     /**
      * Tooltip displayed as overlay on hover.
      */
     extendedTooltip?: JSX.Element | string;
+    /**
+     * Configure the tooltip and overwrite automatically set options.
+     */
+    tooltipProps?: Omit<TooltipProps, "content" | "children" | "renderTarget">;
 }
-export declare const HandleContent: React.MemoExoticComponent<({ children, extendedTooltip }: HandleContentProps) => React.JSX.Element>;
+export declare const HandleContent: React.MemoExoticComponent<({ children, extendedTooltip, tooltipProps }: HandleContentProps) => React.JSX.Element>;

package/dist/types/extensions/react-flow/handles/HandleDefault.d.ts

@@ -1,9 +1,15 @@
 import React from "react";
 import { HandleProps as ReactFlowHandleLegacyProps } from "react-flow-renderer";
 import { HandleProps as ReactFlowHandleNextProps } from "react-flow-renderer-lts";
+import { IntentTypes } from "../../../common/Intent";
 import { ReacFlowVersionSupportProps } from "../versionsupport";
 import { HandleContentProps } from "./HandleContent";
-interface HandleExtensionProps extends ReacFlowVersionSupportProps {
+export declare type HandleCategory = "configuration" | "flexible" | "fixed" | "unknown" | "dependency";
+interface HandleExtensionProps extends ReacFlowVersionSupportProps, Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "children"> {
+    /**
+     * Defines the handle category, mainly used to adjust layout.
+     */
+    category?: HandleCategory;
     /**
      * Extended handle data.
      */
@@ -12,13 +18,16 @@ interface HandleExtensionProps extends ReacFlowVersionSupportProps {
      * Simple text tooltip displayed as title on hover.
      */
     tooltip?: string;
-    children?: JSX.Element | string;
-    onClick?: () => void;
+    /**
+     * Feedback state of the handle.
+     */
+    intent?: IntentTypes;
+    children?: HandleContentProps["children"];
 }
 export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {
 }
 export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {
 }
 export declare type HandleDefaultProps = HandleProps | HandleNextProps;
-export declare const HandleDefault: React.MemoExoticComponent<({ flowVersion, data, tooltip, children, ...handleProps }: HandleDefaultProps) => React.JSX.Element>;
+export declare const HandleDefault: React.MemoExoticComponent<({ flowVersion, data, tooltip, children, category, intent, ...handleProps }: HandleDefaultProps) => React.JSX.Element>;
 export {};

package/dist/types/extensions/react-flow/handles/HandleTools.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
+import { TestableComponent } from "../../../index";
 import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
-export interface HandleToolsProps extends Omit<ContextOverlayProps, "children" | "content" | "popoverClassName"> {
+export interface HandleToolsProps extends Omit<ContextOverlayProps, "children" | "content" | "popoverClassName">, TestableComponent {
     children: string | JSX.Element | JSX.Element[];
 }
 export declare const HandleTools: ({ children, ...otherContextOverlayProps }: HandleToolsProps) => React.JSX.Element;

package/dist/types/extensions/react-flow/nodes/NodeContent.d.ts

@@ -8,15 +8,11 @@ import { HandleNextProps, HandleProps } from "./../handles/HandleDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
 import { NodeProps } from "./NodeDefault";
 import { HighlightingState, NodeHighlightColor } from "./sharedTypes";
+declare type NodeContentHandleLegacyProps = HandleProps;
+declare type NodeContentHandleNextProps = HandleNextProps;
+export declare type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps;
 export type { HighlightingState };
-interface NodeContentHandleLegacyProps extends HandleProps {
-    category?: "configuration";
-}
 export declare type IHandleProps = NodeContentHandleLegacyProps;
-export interface NodeContentHandleNextProps extends HandleNextProps {
-    category?: "configuration";
-}
-export declare type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps;
 export declare type NodeDimensions = {
     width: number;
     height: number;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "23.3.0-rc.0",
+    "version": "23.3.0-rc.1",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -114,19 +114,19 @@
         "@types/color": "^3.0.2",
         "@types/jest": "^29.5.4",
         "@types/lodash": "^4.14.194",
-        "@typescript-eslint/eslint-plugin": "^5.59.11",
-        "@typescript-eslint/parser": "^5.59.11",
+        "@typescript-eslint/eslint-plugin": "^5.62.0",
+        "@typescript-eslint/parser": "^5.62.0",
         "babel-jest": "^29.7.0",
         "chromatic": "^6.17.4",
-        "eslint": "^8.42.0",
-        "eslint-plugin-react": "^7.32.2",
+        "eslint": "^8.49.0",
+        "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-simple-import-sort": "^10.0.0",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-pnp-resolver": "^1.2.3",
-        "lint-staged": "^13.2.2",
+        "lint-staged": "^13.3.0",
         "node-sass-package-importer": "^5.3.2",
         "prettier": "^2.8.8",
         "react-app-polyfill": "^3.0.0",

package/src/common/index.ts

@@ -1,13 +1,16 @@
-import { openInNewTab } from "./utils/openInNewTab";
+import { invisibleZeroWidthCharacters } from "./utils/characters";
 import decideContrastColorValue from "./utils/colorDecideContrastvalue";
 import getColorConfiguration from "./utils/getColorConfiguration";
-import { invisibleZeroWidthCharacters } from "./utils/characters";
+import { getGlobalVar, setGlobalVar } from "./utils/globalVars";
+import { openInNewTab } from "./utils/openInNewTab";
 
 export const utils = {
     openInNewTab,
     decideContrastColorValue,
     getColorConfiguration,
     invisibleZeroWidthCharacters,
-}
+    getGlobalVar,
+    setGlobalVar,
+};
 // @deprecated use `utils`
 export const Utilities = utils;

package/src/common/utils/globalVars.ts

@@ -0,0 +1,18 @@
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+const getGlobalConfig = () => {
+    return typeof window[eccgui as any] === "undefined"
+        ? Object.defineProperty(window, `${eccgui}`, {
+              value: {},
+              writable: true,
+          })[eccgui as any]
+        : window[eccgui as any];
+};
+
+export const getGlobalVar = (varname: string) => {
+    return getGlobalConfig()[varname as any];
+};
+
+export const setGlobalVar = (varname: string, value: any) => {
+    return (getGlobalConfig()[varname as any] = value);
+};

package/src/components/Application/application.scss

@@ -1,13 +1,15 @@
 // @import 'config';
-@import '~@carbon/styles/scss/components/ui-shell/functions';
-@import 'header';
-@import 'toolbar';
+@import "~@carbon/styles/scss/components/ui-shell/functions";
+@import "header";
+@import "toolbar";
+
 // @import '~@carbon/styles/scss/components/ui-shell/product-switcher';
 // @import '~@carbon/styles/scss/components/ui-shell/switcher';
-@import 'sidebar';
+@import "sidebar";
+
 // @import '~@carbon/styles/scss/components/ui-shell/navigation-menu';
-@import 'content';
+@import "content";
 
 .#{$ns}-portal {
-    z-index: 8001; // higher than carbon ui shell header
+    z-index: 10001; // higher than carbon ui shell header and delta to dialog portals
 }

package/src/components/Dialog/Modal.tsx

@@ -1,16 +1,17 @@
 import React from "react";
 import {
     Classes as BlueprintClassNames,
-    IOverlayState,
+    IOverlayState as BlueprintOverlayState,
     Overlay as BlueprintOverlay,
-    OverlayProps,
+    OverlayProps as BlueprintOverlayProps,
 } from "@blueprintjs/core";
 
+import { Utilities } from "../../common";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { Card } from "./../Card";
 
-export interface ModalProps extends OverlayProps, IOverlayState {
+export interface ModalProps extends BlueprintOverlayProps, BlueprintOverlayState {
     children: React.ReactNode | React.ReactNode[];
     /**
      * A space-delimited list of class names to pass along to the BlueprintJS `Overlay` element that is used to create the modal.
@@ -33,6 +34,14 @@ export interface ModalProps extends OverlayProps, IOverlayState {
      * This is needed, e.g. when capturing key (down, up) events that should bubble to the modal's parent elements.
      */
     modalFocusable?: boolean;
+    /**
+     * Works only for modals inside portals (`usePortal={true}`).
+     * When set to `true` then the `z-index` of the modal's portal element is recalculated, so that the modal is always shown on top of all other visible elements.
+     * Use this with care!
+     * Usually the normal opening sequence is enough to show the currently most important modal on top.
+     * If this option is used inflationary then this could harm the visibility of other overlays.
+     */
+    forceTopPosition?: boolean;
 }
 
 /**
@@ -51,6 +60,9 @@ export const Modal = ({
     preventBackdrop = false,
     wrapperDivProps,
     modalFocusable = true,
+    usePortal = true,
+    forceTopPosition = false,
+    onOpening,
     ...otherProps
 }: ModalProps) => {
     const backdropProps: React.HTMLProps<HTMLDivElement> | undefined =
@@ -79,6 +91,23 @@ export const Modal = ({
         return child;
     });
 
+    const handlerOnOpening = (modalElement: HTMLElement) => {
+        if (onOpening) {
+            // call the original event handler
+            onOpening(modalElement);
+        }
+        if (usePortal && forceTopPosition) {
+            const parentalPortal = modalElement.closest(`.${BlueprintClassNames.PORTAL}`) as HTMLElement;
+            const highestTopIndex = (Utilities.getGlobalVar("highestModalTopIndex") as unknown as number) ?? 0;
+            if (parentalPortal) {
+                const portalTopIndex = parseInt(getComputedStyle(parentalPortal).zIndex ?? 0, 10);
+                const newTopIndex = Math.max(portalTopIndex, highestTopIndex) + 1;
+                parentalPortal.style.zIndex = `${newTopIndex}`;
+                Utilities.setGlobalVar("highestModalTopIndex", newTopIndex);
+            }
+        }
+    };
+
     return (
         <BlueprintOverlay
             {...otherProps}
@@ -88,6 +117,9 @@ export const Modal = ({
             canOutsideClickClose={canOutsideClickClose}
             canEscapeKeyClose={canEscapeKeyClose}
             hasBackdrop={!preventBackdrop}
+            usePortal={usePortal}
+            onOpening={handlerOnOpening}
+            portalClassName={`${eccgui}-dialog__portal`}
         >
             <div
                 {...wrapperDivProps}

package/src/components/Dialog/dialog.scss

@@ -15,6 +15,10 @@ $eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0
 
 @import "~@blueprintjs/core/src/components/dialog/dialog";
 
+.#{$eccgui}-dialog__portal {
+    z-index: 8001; // higher than carbon ui shell header
+}
+
 .#{$eccgui}-dialog__backdrop {
     background-color: $eccgui-color-modal-backdrop;
 }

package/src/components/PropertyValuePair/propertyvalue.scss

@@ -6,6 +6,7 @@
 
 .#{$eccgui}-propertyvalue__pair {
     display: block;
+    max-width: 100%;
     clear: both;
 
     &.#{$eccgui}-propertyvalue__pair--hasdivider {

package/src/components/Table/TableExpandHeader.tsx

@@ -3,49 +3,52 @@ import {
     TableExpandHeader as CarbonTableExpandHeader,
     TableExpandHeaderProps as CarbonTableExpandHeaderProps,
 } from "carbon-components-react";
-import IconButton from "./../Icon/IconButton";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestIconProps } from "../Icon";
+import { ValidIconName } from "../Icon/canonicalIconNames";
+
+import IconButton from "./../Icon/IconButton";
 
-export interface TableExpandHeaderProps extends Omit<
-    CarbonTableExpandHeaderProps,
-    "children" | "ariaLabel" | "enableExpando" | "expandIconDescription"
->, React.ThHTMLAttributes<HTMLTableCellElement> {
+export interface TableExpandHeaderProps
+    extends Omit<CarbonTableExpandHeaderProps, "children" | "ariaLabel" | "enableExpando" | "expandIconDescription">,
+        React.ThHTMLAttributes<HTMLTableCellElement> {
     /**
      * This text is displayed as tooltip for the button that toggles the expanded/collapsed state.
      */
     togglerText: string;
-};
+
+    /** An optional icon that is shown as toggle icon. */
+    toggleIcon?: ValidIconName | string[] | React.ReactElement<TestIconProps>;
+}
 
 /**
  * Adds a button to the table header that can trigger a function to expand/collapse all rows of the table.
  */
-export function TableExpandHeader ({
+export function TableExpandHeader({
     togglerText,
     isExpanded,
     onExpand,
     className,
     enableToggle,
+    toggleIcon,
     ...otherCarbonTableExpandHeaderProps
 }: TableExpandHeaderProps) {
-
-    const toggleButton = isExpanded ?
-        React.cloneElement(<IconButton name="toggler-rowcollapse" text={togglerText} />, {onClick: onExpand}) :
-        React.cloneElement(<IconButton name="toggler-rowexpand" text={togglerText} />, {onClick: onExpand});
-
+    const defaultToggleIcon = isExpanded ? "toggler-rowcollapse" : "toggler-rowexpand";
+    const toggleButton = React.cloneElement(<IconButton name={toggleIcon ?? defaultToggleIcon} text={togglerText} />, {
+        onClick: onExpand,
+    });
     return (
         <CarbonTableExpandHeader
-            className={
-                `${eccgui}-simpletable__headexpander` +
-                (!!className ? ` ${className}` : "")
-            }
+            className={`${eccgui}-simpletable__headexpander` + (className ? ` ${className}` : "")}
             isExpanded={isExpanded}
             onExpand={onExpand}
             enableToggle={false}
             {...otherCarbonTableExpandHeaderProps}
         >
-            { enableToggle && toggleButton }
+            {enableToggle && toggleButton}
         </CarbonTableExpandHeader>
-    )
+    );
 }
 
 export default TableExpandHeader;

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

@@ -1,8 +1,9 @@
 import React, { memo } from "react";
-import { Icon, Depiction, DepictionProps, OverflowText } from "../../../index";
-import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
+import { intentClassName, IntentTypes } from "../../../common/Intent";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-import { IntentTypes, intentClassName } from "../../../common/Intent";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { Depiction, DepictionProps, Icon, OverflowText } from "../../../index";
 
 export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -26,62 +27,56 @@ export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
      * Stretches the label component to the full available width.
      */
     fullWidth?: boolean;
+    /**
+     * Label is diaplayed without a box that comes with borders and background color.
+     */
+    loose?: boolean;
     /**
      * Add a info state to the label, visualized by color.
      */
     intent?: IntentTypes;
 }
 
-export const EdgeLabel = memo(({
-    depiction,
-    text,
-    actions,
-    large,
-    fullWidth,
-    intent,
-    title,
-    ...otherDivProps
-} : EdgeLabelProps) => {
-
-    const depEl = (!!depiction && typeof depiction === "string")
-        ? <Depiction image={<Icon name={depiction as ValidIconName} />} />
-        : depiction;
+export const EdgeLabel = memo(
+    ({ depiction, text, actions, large, fullWidth, loose, intent, title, ...otherDivProps }: EdgeLabelProps) => {
+        const depEl =
+            !!depiction && typeof depiction === "string" ? (
+                <Depiction image={<Icon name={depiction as ValidIconName} />} />
+            ) : (
+                depiction
+            );
 
-    return (
-        <div
-            className={
-                `${eccgui}-graphviz__edge-label` +
-                (large ? ` ${eccgui}-graphviz__edge-label--large` : "") +
-                (fullWidth ? ` ${eccgui}-graphviz__edge-label--fullwidth` : "") +
-                (!!intent ? ` ${intentClassName(intent)}` : '')
-            }
-            {...otherDivProps}
-        >
-            {!!depEl && (
-                <div className={`${eccgui}-graphviz__edge-label__depiction`}>
-                    {
-                        React.cloneElement(depEl, {
+        return (
+            <div
+                className={
+                    `${eccgui}-graphviz__edge-label` +
+                    (large ? ` ${eccgui}-graphviz__edge-label--large` : "") +
+                    (fullWidth ? ` ${eccgui}-graphviz__edge-label--fullwidth` : "") +
+                    (loose ? ` ${eccgui}-graphviz__edge-label--loose` : "") +
+                    (intent ? ` ${intentClassName(intent)}` : "")
+                }
+                {...otherDivProps}
+            >
+                {!!depEl && (
+                    <div className={`${eccgui}-graphviz__edge-label__depiction`}>
+                        {React.cloneElement(depEl, {
                             padding: "tiny",
                             ratio: "1:1",
                             resizing: "contain",
                             forceInlineSvg: true,
                             border: false,
                             backgroundColor: undefined,
-                        })
-                    }
+                        })}
+                    </div>
+                )}
+                <div className={`${eccgui}-graphviz__edge-label__text`} title={title}>
+                    {typeof text === "string" ? <OverflowText>{text}</OverflowText> : text}
                 </div>
-            )}
-            <div className={`${eccgui}-graphviz__edge-label__text`} title={title}>
-                { typeof text === "string" ? <OverflowText>{ text }</OverflowText> : text }
+                {!!actions && <div className={`${eccgui}-graphviz__edge-label__aux`}>{actions}</div>}
             </div>
-            {!!actions && (
-                <div className={`${eccgui}-graphviz__edge-label__aux`}>
-                    { actions }
-                </div>
-            )}
-        </div>
-    )
-});
+        );
+    }
+);
 
 export interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObjectElement> {
     /**
@@ -99,42 +94,44 @@ export interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObje
     resizeTimeout?: number;
 }
 
-export const EdgeLabelObject = memo(({
-    children,
-    edgeCenter,
-    resizeTimeout = -1,
-    ...otherForeignObjectProps
-} : EdgeLabelObjectProps) => {
-    const containerCallback = React.useCallback((containerRef) => {
-        if (containerRef) labelSize(containerRef);
-    }, [edgeCenter]);
+export const EdgeLabelObject = memo(
+    ({ children, edgeCenter, resizeTimeout = -1, ...otherForeignObjectProps }: EdgeLabelObjectProps) => {
+        const containerCallback = React.useCallback(
+            (containerRef) => {
+                if (containerRef) labelSize(containerRef);
+            },
+            [edgeCenter]
+        );
 
-    const labelSize = (container: SVGForeignObjectElement) => {
-        const labelElement = container.getElementsByClassName(`${eccgui}-graphviz__edge-label`);
-        if (labelElement.length > 0) {
-            const width = (labelElement[0] as HTMLElement).offsetWidth;
-            const height = (labelElement[0] as HTMLElement).offsetHeight;
-            container.setAttribute("x", (edgeCenter[0] - width/2).toString());
-            container.setAttribute("y", (edgeCenter[1] - height/2).toString());
-            container.setAttribute("width", width.toString());
-            container.setAttribute("height", height.toString());
-        } else if (resizeTimeout > 0){
-            // Content is not ready yet, recall resizing process after timeout.
-            // This can happen in case the children is actually not a `EdgeLabel`.
-            setTimeout(() => { labelSize(container)}, resizeTimeout);
-        }
-    }
+        const labelSize = (container: SVGForeignObjectElement) => {
+            const labelElement = container.getElementsByClassName(`${eccgui}-graphviz__edge-label`);
+            if (labelElement.length > 0) {
+                const width = (labelElement[0] as HTMLElement).offsetWidth;
+                const height = (labelElement[0] as HTMLElement).offsetHeight;
+                container.setAttribute("x", (edgeCenter[0] - width / 2).toString());
+                container.setAttribute("y", (edgeCenter[1] - height / 2).toString());
+                container.setAttribute("width", width.toString());
+                container.setAttribute("height", height.toString());
+            } else if (resizeTimeout > 0) {
+                // Content is not ready yet, recall resizing process after timeout.
+                // This can happen in case the children is actually not a `EdgeLabel`.
+                setTimeout(() => {
+                    labelSize(container);
+                }, resizeTimeout);
+            }
+        };
 
-    return (
-        <foreignObject
-            ref={containerCallback}
-            className={`${eccgui}-graphviz__edge-labelobject`}
-            width="1"
-            height="1"
-            {...otherForeignObjectProps}
-            requiredExtensions="http://www.w3.org/1999/xhtml"
-        >
-            { children }
-        </foreignObject>
-    )
-});
+        return (
+            <foreignObject
+                ref={containerCallback}
+                className={`${eccgui}-graphviz__edge-labelobject`}
+                width="1"
+                height="1"
+                {...otherForeignObjectProps}
+                requiredExtensions="http://www.w3.org/1999/xhtml"
+            >
+                {children}
+            </foreignObject>
+        );
+    }
+);