@eccenca/gui-elements 23.1.0 → 23.2.0-rc.0

package/src/components/Tabs/index.ts

@@ -0,0 +1,4 @@
+export * from "./TabPanel";
+export * from "./Tabs";
+export * from "./Tab";
+export * from "./TabTitle";

package/src/components/TextField/SearchField.tsx

@@ -5,7 +5,7 @@ import Icon from "../Icon/Icon";
 import TextField, { TextFieldProps } from "./TextField";
 import { TestableComponent } from "../../components/interfaces";
 
-interface SearchFieldProps extends TestableComponent, Omit<
+export interface SearchFieldProps extends TestableComponent, Omit<
     TextFieldProps,
     "placeholder | hasStatePrimary | hasStateSuccess | hasStateWarning | hasStateDanger | fullWidth"
 > {
@@ -27,14 +27,14 @@ interface SearchFieldProps extends TestableComponent, Omit<
 /**
  * Special `TextField` element for search term inputs.
  */
-function SearchField({
+export const SearchField = ({
   className = "",
   emptySearchInputMessage = "Enter search term",
   onClearanceHandler,
   onClearanceText = "Clear input",
   leftIcon = <Icon name="operation-search" />,
   ...otherProps
-}: SearchFieldProps) {
+}: SearchFieldProps) => {
   return (
     <TextField
       className={

package/src/components/TextField/TextArea.tsx

@@ -8,29 +8,29 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {InvisibleCharacterWarningProps, useTextValidation} from "./useTextValidation";
 
 export interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
-  /**
-   * when set to true the input takes a blue border color
-   */
-  hasStatePrimary?: boolean;
-  /**
-   * when set to true the input takes a green border color
-   */
-  hasStateSuccess?: boolean;
-  /**
-   * when set to true the input takes an orange border color
-   */
-  hasStateWarning?: boolean;
-  /**
-   * when set to true the input takes a red border color
-   */
-  hasStateDanger?: boolean;
+    /**
+    * when set to true the input takes a blue border color
+    */
+    hasStatePrimary?: boolean;
+    /**
+    * when set to true the input takes a green border color
+    */
+    hasStateSuccess?: boolean;
+    /**
+    * when set to true the input takes an orange border color
+    */
+    hasStateWarning?: boolean;
+    /**
+    * when set to true the input takes a red border color
+    */
+    hasStateDanger?: boolean;
     /**
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
     invisibleCharacterWarning?: InvisibleCharacterWarningProps
 }
 
-function TextArea({
+export const TextArea = ({
   className = "",
   hasStatePrimary = false,
   hasStateSuccess = false,
@@ -39,7 +39,7 @@ function TextArea({
   rows = 5,
   invisibleCharacterWarning,
   ...otherProps
-}: TextAreaProps) {
+}: TextAreaProps) => {
   let intent;
   switch (true) {
     case hasStatePrimary:

package/src/components/TextField/TextField.tsx

@@ -5,7 +5,7 @@ import {
     Intent as BlueprintIntent,
     MaybeElement,
     HTMLInputProps,
-    InputGroupProps,
+    InputGroupProps2,
 } from "@blueprintjs/core";
 import { IntentTypes, Definitions as IntentDefinitions } from "../../common/Intent";
 import Icon from "../Icon/Icon";
@@ -13,7 +13,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {ValidIconName} from "../Icon/canonicalIconNames";
 import {InvisibleCharacterWarningProps, useTextValidation} from "./useTextValidation";
 
-export interface TextFieldProps extends Partial<Omit<InputGroupProps, "intent" | "leftIcon"> & HTMLInputProps> {
+export interface TextFieldProps extends Partial<Omit<InputGroupProps2, "intent" | "leftIcon" | "leftElement"> & HTMLInputProps> {
     /**
     * The input element is displayed with primary color scheme.
     * @deprecated
@@ -55,7 +55,7 @@ export interface TextFieldProps extends Partial<Omit<InputGroupProps, "intent" |
 /**
   * Text input field.
   */
-function TextField({
+export const TextField = ({
   className = "",
   hasStatePrimary = false,
   hasStateSuccess = false,
@@ -65,7 +65,7 @@ function TextField({
   leftIcon,
   invisibleCharacterWarning,
   ...otherProps
-}: TextFieldProps) {
+}: TextFieldProps) => {
   let deprecatedIntent;
   switch (true) {
     case hasStatePrimary:
@@ -118,7 +118,7 @@ function TextField({
       intent={(intent && !(["info", "edited", "removed", "neutral"].includes(intent))) ? intent as BlueprintIntent : undefined}
       fill={fullWidth}
       {...otherBlueprintInputGroupProps}
-      leftIcon={
+      leftElement={
         leftIcon != null && leftIcon !== false ? (
           typeof leftIcon === "string" ? (
             <Icon

package/src/components/TextField/index.ts

@@ -0,0 +1,3 @@
+export * from "./TextField";
+export * from "./TextArea";
+export * from "./SearchField";

package/src/components/TextField/stories/TextField.stories.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { TextField } from "./../../../../index";
 import { helpersArgTypes } from "../../../../.storybook/helpers";
+import {TextFieldProps} from "../TextField";
+import characters from "../../../common/utils/characters"
 
 export default {
     title: "Forms/TextField",
@@ -30,3 +32,28 @@ Default.args = {
     placeholder: "placeholder text",
     readOnly: false,
 };
+
+/** Text field with default value that contains a zero width/invisible character.
+ * As long as the character exists, an alert is raised for every value change with a delay of 500ms.
+ * Instead of an alert, something more sophisticated like a clean up action should be offered in production. */
+export const InvisibleCharacterWarning = Template.bind({})
+
+const invisibleCharacterWarningProps: TextFieldProps = {
+    ...Default.args,
+    invisibleCharacterWarning: {
+        callback: (codePoints) => {
+            if(codePoints.size) {
+                const codePointsString = [...Array.from(codePoints)]
+                    .map((n) => {
+                        const info = characters.invisibleZeroWidthCharacters.codePointMap.get(n)
+                        return info.fullLabel
+                    })
+                    .join(", ")
+                alert("Invisible character detected in input string. Code points: " + codePointsString)
+            }
+        },
+        callbackDelay: 500
+    },
+    defaultValue: "Invisible character ->​<-"
+}
+InvisibleCharacterWarning.args = invisibleCharacterWarningProps

package/src/components/Toolbar/Toolbar.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Allow sections to break up into multiple lines when there is not enough space available.
      * Only makes sense for horizontal toolbars.
@@ -17,13 +17,13 @@ interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * Element to group user-interaction elements.
  */
-function Toolbar({
+export const Toolbar = ({
     children,
     className = '',
     noWrap = false,
     verticalStack = false,
     ...restProps
-}: ToolbarProps) {
+}: ToolbarProps) => {
     return (
         <div
             {...restProps}

package/src/components/Toolbar/ToolbarSection.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface ToolbarSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ToolbarSectionProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
     * Is allowed to allocate more space than necessary to show all children.
     */
@@ -21,14 +21,14 @@ interface ToolbarSectionProps extends React.HTMLAttributes<HTMLDivElement> {
  * Provides element to group toolbar elements together.
  * It can be configured how dynamic it is displayed regarding provided space inside the `Toolbar` parent.
  */
-function ToolbarSection({
+export const ToolbarSection = ({
     children,
     className = '',
     canGrow = false,
     canShrink = false,
     hideOverflow = false,
     ...otherProps
-}:ToolbarSectionProps) {
+}:ToolbarSectionProps) => {
     return (
         <div
             {...otherProps}

package/src/components/Toolbar/index.ts

@@ -0,0 +1,2 @@
+export * from "./Toolbar";
+export * from "./ToolbarSection";

package/src/components/Tooltip/Tooltip.tsx

@@ -35,7 +35,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      markdownProps?: Omit<MarkdownParserProps, "children">;
 }
 
-function Tooltip({
+export const Tooltip = ({
     children,
     content,
     className = "",
@@ -44,7 +44,7 @@ function Tooltip({
     markdownEnabler = "\n\n",
     markdownProps,
     ...otherProps
-}: TooltipProps) {
+}: TooltipProps) => {
     let tooltipContent = content;
 
     if (

package/src/components/Typography/Highlighter.tsx

@@ -10,7 +10,7 @@ export interface HighlighterProps {
  * @param label       The string to highlight.
  * @param searchValue The mutli-word search query from which single words should be highlighted in the label.
  */
-function Highlighter({ label, searchValue }: HighlighterProps) {
+export function Highlighter({ label, searchValue }: HighlighterProps) {
     return <>{getSearchHighlight(label, searchValue)}</>;
 }
 
@@ -49,22 +49,37 @@ const escapeRegexWord = (str: string) => {
     return str.toLowerCase().replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
 };
 
-/** Extracts search words separated by white space. */
+/**
+ * Extracts search words separated by white space.
+ * @deprecated moved to `highlighterUtils.extractSearchWords`
+ */
 export function extractSearchWords(textQuery: string, toLowerCase: boolean = false): string[] {
     const words = textQuery.split(RegExp("\\s+")).filter((word) => word !== "");
     return toLowerCase ? words.map(w => w.toLowerCase()) : words
 }
 
-/** Returns true if all search words are included in the given text */
+/**
+ * Returns true if all search words are included in the given text
+ * @deprecated moved to `highlighterUtils.matchesAllWords`
+ */
 export function matchesAllWords(text: string,
                                 searchWords: string[]): boolean {
     return searchWords.every(w => text.includes(w))
 }
 
-/** Creates a case-insensitive multi-word regex, that matches any of the given words. */
+/**
+ * Creates a case-insensitive multi-word regex, that matches any of the given words.
+ * @deprecated moved to `highlighterUtils.createMultiWordRegex`
+ */
 export function createMultiWordRegex(multiWordQuery: string[], global: boolean = true) {
     const regexString = multiWordQuery.map(escapeRegexWord).join("|");
     return RegExp(regexString, (global ? "g" : "") + "i");
 }
 
+export const highlighterUtils = {
+    extractSearchWords,
+    matchesAllWords,
+    createMultiWordRegex,
+}
+
 export default Highlighter;

package/src/components/Typography/HtmlContentBlock.tsx

@@ -18,7 +18,7 @@ export interface HtmlContentBlockProps extends React.HTMLAttributes<HTMLDivEleme
     noScrollbarsOnChildren?: boolean;
 }
 
-function HtmlContentBlock({
+export const HtmlContentBlock = ({
     className = "",
     children,
     small = false,
@@ -29,7 +29,7 @@ function HtmlContentBlock({
     linebreakPrevented = false,
     noScrollbarsOnChildren = false,
     ...otherProps
-}: HtmlContentBlockProps) {
+}: HtmlContentBlockProps) => {
     return (
         <div
             className={

package/src/components/Typography/OverflowText.tsx

@@ -11,7 +11,7 @@ export interface OverflowTextProps {
 }
 
 /** Prevents text from overflowing. */
-function OverflowText({
+export const OverflowText = ({
     className = "",
     children,
     ellipsis,
@@ -19,7 +19,7 @@ function OverflowText({
     passDown = false,
     useHtmlElement,
     ...otherProps
-}: OverflowTextProps) {
+}: OverflowTextProps) => {
     const defaultHtmlElement = inline ? "span" : "div";
     const overflowtextElement = useHtmlElement
         ? React.createElement(useHtmlElement)

package/src/components/Typography/WhiteSpaceContainer.tsx

@@ -47,7 +47,7 @@ export interface WhiteSpaceContainerProps extends React.HTMLAttributes<HTMLDivEl
  * Simple container to add whitespace inside and around of it without adding style attributes directly.
  * This way the added whitespace keeps visually connected to the other whitespaces used in the application.
  */
-function WhiteSpaceContainer({
+export const WhiteSpaceContainer = ({
     className,
     children,
     marginTop,
@@ -60,7 +60,7 @@ function WhiteSpaceContainer({
     paddingLeft,
     linebreakForced = false,
     ...otherDivProps
-}: WhiteSpaceContainerProps) {
+}: WhiteSpaceContainerProps) => {
 
     const elementClassName = `${eccgui}-typography__whitespace`;
 

package/src/components/Typography/index.ts

@@ -1,25 +1,13 @@
-import Highlighter, { HighlighterProps } from "./Highlighter";
 import { extractSearchWords, matchesAllWords, createMultiWordRegex } from "./Highlighter";
-import HtmlContentBlock, { HtmlContentBlockProps } from "./HtmlContentBlock";
-import OverflowText, { OverflowTextProps } from "./OverflowText";
-import WhiteSpaceContainer, { WhiteSpaceContainerProps } from "./WhiteSpaceContainer";
-
-export type {
-    HighlighterProps,
-    HtmlContentBlockProps,
-    OverflowTextProps,
-    WhiteSpaceContainerProps
-};
-
-export {
-    Highlighter,
-    HtmlContentBlock,
-    OverflowText,
-    WhiteSpaceContainer,
-};
 
+// @deprecated use `highlighterUtils`
 export const HighlighterFunctions = {
     extractSearchWords,
     matchesAllWords,
     createMultiWordRegex,
 };
+
+export * from "./Highlighter";
+export * from "./HtmlContentBlock";
+export * from "./OverflowText";
+export * from "./WhiteSpaceContainer";

package/src/components/Workspace/WorkspaceContent.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 // import PropTypes from 'prop-types';
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import Grid from "./../Grid/Grid";
+import Grid, { GridProps } from "./../Grid/Grid";
 import GridRow from "./../Grid/GridRow";
 
-function WorkspaceContent({ children, className = '', ...restProps }: any) {
+export interface WorkspaceContentProps extends GridProps {};
+
+export const WorkspaceContent = ({ children, className = '', ...restProps }: WorkspaceContentProps) => {
     return (
         <Grid
             {...restProps}

package/src/components/Workspace/WorkspaceHeader.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface IWorkspaceHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface WorkspaceHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: any;
     /**
         space-delimited list of class names
@@ -9,7 +9,9 @@ interface IWorkspaceHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
 
-function WorkspaceHeader({ children, className = '', ...otherProps }: IWorkspaceHeaderProps) {
+export type IWorkspaceHeaderProps = WorkspaceHeaderProps;
+
+export const WorkspaceHeader = ({ children, className = '', ...otherProps }: WorkspaceHeaderProps) => {
     return (
         <div className={`${eccgui}-workspace__header ` + className} {...otherProps}>
             { children }

package/src/components/Workspace/WorkspaceMain.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-// import PropTypes from 'prop-types';
-import GridColumn from "./../Grid/GridColumn";
+import GridColumn, { GridColumnProps } from "./../Grid/GridColumn";
 
-function WorkspaceMain({ children, className = "", ...restProps }: any) {
+export interface WorkspaceMainProps extends GridColumnProps {};
+
+export const WorkspaceMain = ({ children, className = "", ...restProps }: GridColumnProps) => {
     return (
         <GridColumn {...restProps} className={`${eccgui}-workspace__main ` + className}>
             {children}

package/src/components/Workspace/WorkspaceSide.tsx

@@ -1,14 +1,15 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-// import PropTypes from 'prop-types';
-import GridColumn from "./../Grid/GridColumn";
+import GridColumn, { GridColumnProps } from "./../Grid/GridColumn";
 
-function WorkspaceSide({ children, className = '', ...restProps }: any) {
+export interface WorkspaceSideProps extends GridColumnProps {};
+
+export const WorkspaceSide = ({ children, className = '', ...restProps }: GridColumnProps) => {
     return (
         <GridColumn
             {...restProps}
             className={`${eccgui}-workspace__side `+className}
-            sm={4} md={8} lg={5} xlg={5}
+            carbonSizeConfig={{ sm:4, md:8, lg:5, xlg:5 }}
         >
             { children }
         </GridColumn>

package/src/components/Workspace/index.ts

@@ -0,0 +1,4 @@
+export * from "./WorkspaceContent";
+export * from "./WorkspaceMain";
+export * from "./WorkspaceSide";
+export * from "./WorkspaceHeader";

package/src/components/Workspace/workspace.scss

@@ -1 +1,6 @@
 @import 'header';
+
+html {
+    background-color: $eccgui-color-workspace-background;
+    color: $eccgui-color-workspace-text;
+}

package/src/components/index.scss

@@ -1,6 +1,40 @@
-@import "./Badge/badge";
+@import "./Application/application";
+@import "./AutocompleteField/autocompletefield";
+@import "./Breadcrumb/breadcrumb";
+@import "./Button/button";
+@import "./Card/card";
+@import "./Checkbox/checkbox";
+@import "./ContextOverlay/contextoverlay";
 @import "./Depiction/depiction";
+@import "./Dialog/dialog";
+@import "./Form/form";
+@import "./Grid/grid";
+@import "./HoverToggler/hovertoggler";
 @import "./Icon/icon";
-@import "./Tree/tree";
+@import "./Iframe/iframe";
+@import "./InteractionGate/interactiongate";
+@import "./Label/label";
+@import "./Link/link";
+@import "./Menu/menu";
+@import "./Notification/notification";
+@import "./OverviewItem/overviewitem";
+@import "./Pagination/pagination";
+@import "./RadioButton/radiobutton";
+@import "./Select/select";
+@import "./Separation/separation";
+@import "./Spinner/spinner";
+@import "./Structure/titles";
 @import "./Table/table";
+@import "./Tabs/tabs";
+@import "./TagInput/taginput";
+@import "./Tag/tag";
+@import "./TextField/textfield";
+@import "./Toolbar/toolbar";
+@import "./Tooltip/tooltip";
+@import "./Tree/tree";
 @import "./Typography/typography";
+@import "./Workspace/workspace";
+@import "./Accordion/accordion";
+@import "./AutoSuggestion/AutoSuggestion";
+@import "./Badge/badge";
+@import "./PropertyValuePair/propertyvalue";

package/src/components/index.ts

@@ -1,10 +1,47 @@
+export * from "./Accordion";
+export * from "./Application";
+export * from "./AutocompleteField";
+export * from "./AutoSuggestion";
 export * from "./Badge/Badge";
+export * from "./Breadcrumb";
+export * from "./Button/Button";
+export * from "./Card";
+export * from "./Checkbox/Checkbox";
+export * from "./ContextOverlay";
 export * from "./Depiction/Depiction";
+export * from "./Dialog";
+export * from "./Form";
+export * from "./Grid";
+export * from "./HoverToggler/HoverToggler";
 export * from "./Icon";
+export * from "./Iframe";
+export * from "./InteractionGate/InteractionGate";
+export * from "./Label/Label";
+export * from "./Link/Link";
+export * from "./List/List";
+export * from "./Menu";
+export * from "./MultiSelect/MultiSelect";
+export * from "./Notification";
+export * from "./NumericInput/NumericInput";
+export * from "./OverviewItem";
+export * from "./Pagination/Pagination";
 export * from "./ProgressBar";
+export * from "./PropertyValuePair";
+export * from "./RadioButton/RadioButton";
+export * from "./Select/Select";
+export * from "./Separation/Divider";
+export * from "./Separation/Spacing";
+export * from "./Spinner/Spinner";
+export * from "./Structure";
+export * from "./Switch/Switch";
 export * from "./Table";
+export * from "./Tabs";
 export * from "./Tag";
+export * from "./TextField";
+export * from "./Toolbar";
+export * from "./Tooltip/Tooltip";
 export * from "./Tree/Tree";
 export * from "./Typography";
+export * from "./Workspace";
 
 export * from "./interfaces";

package/src/extensions/codemirror/_codemirror.scss

@@ -1,11 +1,12 @@
-@import "~codemirror/lib/codemirror.css";
-@import "~codemirror/theme/xq-light.css";
+@import "~codemirror/lib/codemirror";
+@import "~codemirror/theme/xq-light";
 
 // adjustments
 
 .#{$eccgui}-codeeditor {
     .CodeMirror {
         border-radius: $pt-border-radius;
+        clip-path: unset !important; // we may check later why they set inset(0) now
 
         // get them a "border" like input boxes from blueprintjs
         box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;

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

@@ -9,8 +9,9 @@ import {
 } from "react-flow-renderer";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { IntentTypes, intentClassName } from "../../../common/Intent";
-import { NodeHighlightColor, evaluateHighlightColors } from "./../nodes/NodeContent";
-import { drawEdgeStraight} from "./utils";
+import { nodeContentUtils } from "./../nodes/NodeContent";
+import { NodeHighlightColor } from "./../nodes/sharedTypes";
+import { drawEdgeStraight, drawEdgeStep } from "./utils";
 
 export interface EdgeDefaultDataProps {
     /**
@@ -98,7 +99,7 @@ export const EdgeDefault = memo(
         const edgeStyle = edgeOriginalProperties.style ?? {};
         const {
             highlightCustomPropertySettings
-        } = evaluateHighlightColors("--edge-highlight", highlightColor);
+        } = nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor);
 
         return (
             <g
@@ -137,14 +138,14 @@ export const EdgeDefault = memo(
     }
 );
 
-export const createEdgeDefaultClassName = ({
+const createEdgeDefaultClassName = ({
     strokeType,
     intent,
     highlightColor,
 }: EdgeDefaultDataProps, baseClass: string = "react-flow__edge-path") => {
     const {
         highlightClassNameSuffix,
-    } = evaluateHighlightColors("--edge-highlight", highlightColor);
+    } = nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor);
     return baseClass +
     (strokeType ? ` ${baseClass}--stroke-${strokeType}` : "") +
     (intent ? ` ${intentClassName(intent)}` : "") +
@@ -153,3 +154,9 @@ export const createEdgeDefaultClassName = ({
         : ""
     );
 }
+
+export const edgeDefaultUtils = {
+    createEdgeDefaultClassName,
+    drawEdgeStep,
+    drawEdgeStraight,
+}

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

@@ -39,6 +39,7 @@ export const EdgeLabel = memo(({
     large,
     fullWidth,
     intent,
+    title,
     ...otherDivProps
 } : EdgeLabelProps) => {
 
@@ -70,7 +71,7 @@ export const EdgeLabel = memo(({
                     }
                 </div>
             )}
-            <div className={`${eccgui}-graphviz__edge-label__text`}>
+            <div className={`${eccgui}-graphviz__edge-label__text`} title={title}>
                 { typeof text === "string" ? <OverflowText>{ text }</OverflowText> : text }
             </div>
             {!!actions && (
@@ -82,7 +83,7 @@ export const EdgeLabel = memo(({
     )
 });
 
-interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObjectElement> {
+export interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObjectElement> {
     /**
      * The `<EdgeLabel />` element that need to be displayed.
      */