@eccenca/gui-elements 23.0.0-rc.1 → 23.0.0-rc.2

package/src/components/Label/Label.tsx

@@ -1,8 +1,36 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import Tooltip from "../Tooltip/Tooltip";
+import Tooltip, { TooltipProps } from "../Tooltip/Tooltip";
 import Icon from "../Icon/Icon";
 
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /**
+     * Label text.
+     */
+    text?: string | JSX.Element;
+    /**
+     * Short info about label semantic, it is displayed in parentesis after the label text.
+     */
+    info?: string | JSX.Element;
+    /**
+     * Additional tooltip, attached to an info icon that is displayed after the info.
+     */
+    tooltip?: string | JSX.Element;
+    /**
+     * Additonal tooltip properties, e.g. `hoverOpenDelay`.
+     */
+    tooltipProps?: Partial<Omit<TooltipProps, "content" | "children" | "disabled">>;
+    /**
+     * Set the name of an HTML element if the display should be used for something else that a `label` element.
+     */
+    isLayoutForElement?: string;
+    /**
+     * Label is displayed inactive.
+     * If there is no `isLayoutForElement` set then a `span` is used.
+     */
+    disabled?: boolean;
+}
+
 function Label({
     children,
     className = "",
@@ -10,34 +38,38 @@ function Label({
     text,
     info,
     tooltip,
-    tooltipProperties,
+    tooltipProps,
     isLayoutForElement = "label",
-    ...otherProps
-}: any) {
+    ...otherLabelProps
+}: LabelProps) {
     let htmlElementstring = isLayoutForElement;
     htmlElementstring = disabled && htmlElementstring === "label" ? "span" : htmlElementstring;
-    const labelElement = React.createElement(htmlElementstring);
 
-    return text ? (
-        <labelElement.type
-            className={`${eccgui}-label` + (className ? " " + className : "") + (disabled ? ` ${eccgui}-label--disabled` : "")}
-            {...otherProps}
-            htmlFor={disabled ? "" : otherProps.htmlFor}
-        >
-            <span className={`${eccgui}-label__text`}>{text}</span>
+    const labelContent = (
+        <>
+            {text && <span className={`${eccgui}-label__text`}>{text}</span>}
             {info && <span className={`${eccgui}-label__info`}>{info}</span>}
             {tooltip && (
                 <span className={`${eccgui}-label__tooltip`}>
-                    <Tooltip content={tooltip} disabled={disabled} {...tooltipProperties}>
+                    <Tooltip content={tooltip} disabled={disabled} {...tooltipProps}>
                         <Icon name="item-info" small />
                     </Tooltip>
                 </span>
             )}
             {children && <span className={`${eccgui}-label__other`}>{children}</span>}
-        </labelElement.type>
+        </>
+    );
+
+    return (!!text || !!info || !!tooltip || !!children) ? React.createElement(
+        htmlElementstring,
+        {
+            className: `${eccgui}-label` + (className ? " " + className : "") + (disabled ? ` ${eccgui}-label--disabled` : ""),
+            ...otherLabelProps,
+        },
+        labelContent
     ) : (
         <></>
-    );
+    )
 }
 
 export default Label;

package/src/components/Menu/MenuItem.tsx

@@ -1,18 +1,15 @@
 import React from 'react';
-import {MenuItem as BlueprintMenuItem, MenuItemProps} from "@blueprintjs/core";
+import {MenuItem as BlueprintMenuItem, MenuItemProps as BlueprintMenuItemProps} from "@blueprintjs/core";
 import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 import Icon from '../Icon/Icon';
 import { openInNewTab } from '../../common/utils/openInNewTab';
 import {ValidIconName} from "../Icon/canonicalIconNames";
 
-interface IProps {
-    children?: React.ReactNode | React.ReactNode[]
-    className?: string
-    icon?: ValidIconName | string[]
-    // Props defined by the Blueprint component that should be forwarded
-    internalProps?: Partial<MenuItemProps> & React.AnchorHTMLAttributes<HTMLAnchorElement>
-    // FIXME: CMEM-3742: For backward compatibility, should be avoided in all code bases
-    [key: string]: any
+export interface MenuItemProps extends Omit<BlueprintMenuItemProps, "icon">, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target"> {
+    /*
+     * If set the icon is diplayed on the left side of the menu item.
+     */
+    icon?: ValidIconName | string[];
 }
 
 /** A single item in a Menu. */
@@ -20,19 +17,15 @@ function MenuItem({
                       children,
                       className = '',
                       icon,
-                      internalProps,
                       onClick,
                       href,
                       ...restProps
-                  }: IProps) {
-    const actualHref = internalProps?.href ?? href;
-    const onClickHandler = internalProps?.onClick ?? onClick;
+                  }: MenuItemProps) {
     return (
         <BlueprintMenuItem
-            {...internalProps}
             {...restProps}
-            href={actualHref}
-            onClick={(e) => openInNewTab(e, onClickHandler, actualHref)}
+            href={href}
+            onClick={(e) => openInNewTab(e, onClick, href)}
             className={`${eccgui}-menu__item ` + className}
             icon={
                 icon ? <Icon name={icon} /> : false

package/src/components/Menu/menu.scss

@@ -48,7 +48,7 @@ $menu-background-color: transparent !default;
 .#{$ns}-menu {
     padding: 0;
 
-    .#{$ns}-popover-content > & {
+    .#{$ns}-popover2-content > & {
         padding: $eccgui-size-inline-whitespace / 2;
         min-width: 10em;
         max-width: 20em;
@@ -69,11 +69,12 @@ $menu-background-color: transparent !default;
 
     &:hover {
         .#{$ns}-menu-item {
-            max-width: none;
+            max-width: 100vw; // something similar like `none` in this situation
+            transition: max-width $pt-transition-duration ease-in 0.75s;
         }
         .#{$ns}-text-overflow-ellipsis {
             opacity: $eccgui-opacity-regular;
-            transition: opacity 0.11s;
+            transition: opacity $pt-transition-duration ease-in 0.75s;
         }
     }
 }

package/src/components/MultiSelect/MultiSelect.tsx

@@ -1,11 +1,21 @@
 import React from "react";
-import {Intent as BlueprintIntent} from "@blueprintjs/core";
-import {IItemRendererProps, MultiSelect as BlueprintMultiSelect, MultiSelectProps} from "@blueprintjs/select";
-import MenuItem from "../Menu/MenuItem";
-import Highlighter from "../Typography/Highlighter";
-import Button from "../Button/Button";
-import OverflowText from "../Typography/OverflowText";
-import {HTMLInputProps} from "@blueprintjs/core/src/common/props";
+import {
+    Intent as BlueprintIntent,
+    HTMLInputProps as BlueprintHTMLInputProps
+} from "@blueprintjs/core";
+import {
+    IItemRendererProps as BlueprintItemRendererProps,
+    MultiSelect2 as BlueprintMultiSelect,
+    MultiSelect2Props as BlueprintMultiSelectProps
+} from "@blueprintjs/select";
+import {
+    MenuItem,
+    Highlighter,
+    Button,
+    OverflowText,
+    ContextOverlayProps,
+} from "./../../index";
+
 import {removeExtraSpaces} from "../../common/utils/stringUtils";
 
 export interface SelectedParamsType<T> {
@@ -14,7 +24,7 @@ export interface SelectedParamsType<T> {
     createdItems: Partial<T>[];
 }
 
-interface IProps<T> extends Pick<MultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
+interface IProps<T> extends Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
     /**
      * Returns the unique ID of an item. This will be used for equality of items.
      */
@@ -33,16 +43,16 @@ interface IProps<T> extends Pick<MultiSelectProps<T>, "items" | "placeholder" |
      */
     onSelection?: (params: SelectedParamsType<T>) => void;
     /**
-     * Props to spread to `Popover`. Note that `content` cannot be changed.
+     * Props to spread to `ContextOverlay`. Note that `content` cannot be changed.
      */
-    popoverProps?: MultiSelectProps<T>["popoverProps"];
+    contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "children">>;
     /**
      * Props to spread to `TagInput`. Use `query` and `onQueryChange` to control the input.
      */
-    tagInputProps?: MultiSelectProps<T>["tagInputProps"];
+    tagInputProps?: BlueprintMultiSelectProps<T>["tagInputProps"];
 
     /** Additional properties for the (query) input field of the multi-selection. */
-    inputProps?: HTMLInputProps;
+    inputProps?: BlueprintHTMLInputProps;
 
     /**
      * prop to listen for query changes, when text is entered in the multi-select input
@@ -50,7 +60,7 @@ interface IProps<T> extends Pick<MultiSelectProps<T>, "items" | "placeholder" |
     runOnQueryChange?: (query: string) => Promise<T[] | undefined>;
     /**
      * Whether the component should take up the full width of its container.
-     * This overrides `popoverProps.fill` and `tagInputProps.fill`.
+     * This overrides `tagInputProps.fill`.
      */
     fullWidth?: boolean;
     /**
@@ -99,7 +109,7 @@ function MultiSelect<T>({
     itemId,
     itemLabel,
     onSelection,
-    popoverProps,
+    contextOverlayProps,
     tagInputProps,
     inputProps,
     runOnQueryChange,
@@ -221,7 +231,7 @@ function MultiSelect<T>({
     /**
      * defines how an item in the item list is displayed
      */
-    const onItemRenderer = (item: T, { handleClick, modifiers }: IItemRendererProps) => {
+    const onItemRenderer = (item: T, { handleClick, modifiers }: BlueprintItemRendererProps) => {
         if (!modifiers.matchesPredicate) {
             return null;
         }
@@ -361,13 +371,15 @@ function MultiSelect<T>({
             }}
             popoverProps={{
                 minimal: true,
-                position: "bottom-left",
+                placement: "bottom-start",
                 hasBackdrop: true,
-                ...popoverProps,
-                defaultIsOpen: true,
+                fill: true,
+                ...contextOverlayProps,
             }}
         />
     );
 }
 
+MultiSelect.ofType = BlueprintMultiSelect.ofType;
+
 export default MultiSelect;

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { loremIpsum } from "react-lorem-ipsum";
+
+import {
+  Select,
+  Button,
+  MenuItem,
+} from "../../index";
+
+export default {
+  title: "Components/Select",
+  component: Select,
+  argTypes: {
+  },
+} as ComponentMeta<typeof Select>;
+
+const Template: ComponentStory<typeof Select> = (args) => (
+    <Select {...args}>
+        <Button alignText="left" text="Select an element" fill outlined rightIcon="toggler-showmore"/>
+    </Select>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    items: loremIpsum({ p: 1, avgSentencesPerParagraph: 5, random: false })
+        .toString()
+        .split(".")
+        .map((item) => { return { label: item }}),
+    itemRenderer: (item, props) => {
+        return <MenuItem text={item.label} />
+    },
+    fill: true,
+    filterable: false,
+}

package/src/components/Select/Select.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import {
+    Select2 as BlueprintSelect,
+    Select2Props as BlueprintSelectProps,
+} from "@blueprintjs/select";
+import { ContextOverlayProps } from "./../../index";
+
+/**
+ * FIXME: Currently we only route the original element through.
+ * We should add here basic elemeents and processes for target and selections, etc.
+ */
+
+export interface SelectProps<T> extends Omit<
+    BlueprintSelectProps<T>,
+    "popoverTargetProps" | "popoverContentProps" | "popoverProps" | "popoverRef"
+> {
+    /**
+     * Props to spread to `ContextOverlay` that is used to display the dropdown.
+     */
+    contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "defaultIsOpen" | "disabled" | "fill" | "renderTarget" | "targetTagName">>
+}
+
+/**
+ * Create a Select box without the HTML select element.
+ * It is possible to filter options, as well as to add new options if necessary.
+ */
+function Select<T>({contextOverlayProps, ...otherSelectProps}: SelectProps<T>) {
+    return (
+        <BlueprintSelect<T>
+            popoverProps={{ minimal: true, ...contextOverlayProps}}
+            {...otherSelectProps}
+        />
+    );
+}
+
+Select.ofType = BlueprintSelect.ofType;
+
+export default Select;

package/src/components/Select/_select.scss

@@ -0,0 +1,8 @@
+@import "~@blueprintjs/select/src/components/select/select";
+
+.#{$ns}-select-popover {
+    .#{$ns}-menu {
+        max-height: unset;
+        max-width: unset;
+    }
+}

package/src/components/Tabs/TabTitle.tsx

@@ -54,10 +54,8 @@ const TabTitle = ({
             tabIndex={-1}
             text={text}
             tooltip={disabled ? undefined : tooltip}
-            tooltipProperties={{
-                tooltipProps: {
-                    boundary: "window"
-                }
+            tooltipProps={{
+                rootBoundary: "viewport"
             }}
             icon={<>{titlePrefix}</>}
             rightIcon={<>{titleSuffix}</>}

package/src/components/Tabs/tabs.scss

@@ -33,7 +33,7 @@ $tab-indicator-width: 3px !default;
     }
 
     & > .#{$ns}-button, // normal button
-    & > span > span > span > .#{$ns}-button { // button with tooltip
+    & > span > span > .#{$ns}-button { // button with tooltip
         outline: none;
         margin-bottom: $tab-indicator-width;
         max-width: 15rem;

package/src/components/Tag/tag.scss

@@ -86,8 +86,6 @@ $tag-round-adjustment: 0px !default;
 .#{$ns}-tag {
     border-width: 1px;
     border-style: solid;
-    border-color: rgba($tag-default-color, 0.75);
-    background-color: rgba($tag-default-color, 0.75);
 
     &:not([class*="#{$ns}-intent-"]) {
         &.#{$eccgui}-tag--strongeremphasis {
@@ -98,6 +96,10 @@ $tag-round-adjustment: 0px !default;
             border-color: rgba($tag-default-color, 0.875);
             background-color: rgba($tag-default-color, 0.875);
         }
+        &.#{$eccgui}-tag--normalemphasis {
+            border-color: rgba($tag-default-color, 0.75);
+            background-color: rgba($tag-default-color, 0.75);
+        }
         &.#{$eccgui}-tag--weakemphasis {
             border-color: rgba($tag-default-color, 0.625);
             background-color: rgba($tag-default-color, 0.625);
@@ -106,27 +108,29 @@ $tag-round-adjustment: 0px !default;
             border-color: rgba($tag-default-color, 0.5);
             background-color: rgba($tag-default-color, 0.5);
         }
-    }
-
-    &.#{$ns}-minimal:not([class*="#{$ns}-intent-"]) {
-        border-color: rgba($tag-default-color, 0.15);
-        background-color: rgba(mix(rgba($tag-default-color, 0.15), #fff), 0.75);
 
-        &.#{$eccgui}-tag--strongeremphasis {
-            border-color: rgba($tag-default-color, 0.3);
-            background-color: rgba(mix(rgba($tag-default-color, 0.3), #fff), 1);
-        }
-        &.#{$eccgui}-tag--strongemphasis {
-            border-color: rgba($tag-default-color, 0.225);
-            background-color: rgba(mix(rgba($tag-default-color, 0.225), #fff), 0.875);
-        }
-        &.#{$eccgui}-tag--weakemphasis {
-            border-color: rgba($tag-default-color, 0.075);
-            background-color: rgba(mix(rgba($tag-default-color, 0.075), #fff), 0.625);
-        }
-        &.#{$eccgui}-tag--weakeremphasis {
-            border-color: rgba($tag-default-color, 0.15);
-            background-color: rgba(mix(rgba($tag-default-color, 0), #fff), 0.5);
+        &.#{$ns}-minimal,
+        &.#{$ns}-minimal.#{$ns}-interactive {
+            &.#{$eccgui}-tag--strongeremphasis {
+                border-color: rgba($tag-default-color, 0.3);
+                background-color: rgba(mix(rgba($tag-default-color, 0.3), #fff), 1);
+            }
+            &.#{$eccgui}-tag--strongemphasis {
+                border-color: rgba($tag-default-color, 0.225);
+                background-color: rgba(mix(rgba($tag-default-color, 0.225), #fff), 0.875);
+            }
+            &.#{$eccgui}-tag--normalemphasis {
+                border-color: rgba($tag-default-color, 0.15);
+                background-color: rgba(mix(rgba($tag-default-color, 0.15), #fff), 0.75);
+            }
+            &.#{$eccgui}-tag--weakemphasis {
+                border-color: rgba($tag-default-color, 0.075);
+                background-color: rgba(mix(rgba($tag-default-color, 0.075), #fff), 0.625);
+            }
+            &.#{$eccgui}-tag--weakeremphasis {
+                border-color: rgba($tag-default-color, 0.15);
+                background-color: rgba(mix(rgba($tag-default-color, 0), #fff), 0.5);
+            }
         }
     }
 }

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { loremIpsum } from "react-lorem-ipsum";
+
+import {
+  Tooltip
+} from "../../index";
+
+export default {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  argTypes: {
+  },
+} as ComponentMeta<typeof Tooltip>;
+
+const Template: ComponentStory<typeof Tooltip> = (args) => (
+    <Tooltip {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: <span>hover me</span>,
+    content: loremIpsum({
+        p: 1,
+        avgSentencesPerParagraph: 2,
+        random: false
+    }).toString(),
+    addIndicator: true,
+    // this is a workaround to prevent empty functions in code example
+    onClose: false,
+    // onClosed: false, // this somehow leads to a problem when closed with `<span>` target
+    onClosing: false,
+    onInteraction: false,
+    onOpened: false,
+    onOpening: false,
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -1,20 +1,27 @@
 import React from "react";
-import { Classes as BlueprintClassNames, Tooltip as BlueprintTooltip } from "@blueprintjs/core";
+import {
+    TOOLTIP2_INDICATOR
+} from "@blueprintjs/popover2/src/classes";
+import {
+    Tooltip2 as BlueprintTooltip,
+    Tooltip2Props as BlueprintTooltipProps
+} from "@blueprintjs/popover2";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import {TooltipProps as BlueprintTooltipProps} from "@blueprintjs/core";
 
-export interface TooltipProps {
-    className?: string
-    addIndicator?: boolean
-    /** Blueprint specific tooltip props */
-    tooltipProps?: Partial<BlueprintTooltipProps>
-    /** The content that is displayed when hovering over the tooltip area. */
-    content: JSX.Element | string
-    /** The size specifies the dimension the element can maximal grow. */
-    size?: "small" | "medium" | "large"
-    children: React.ReactNode | React.ReactNode[]
-    /** @deprecated Use tooltipProps for Blueprint specific props or add concrete properties in all other cases. */
-    [key: string]: any
+export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
+    /**
+     * Add dotted underline as visual indication to the target that a tooltip is attached.
+     * Should be used together with text-only elements.
+     */
+    addIndicator?: boolean;
+    /**
+     * The size specifies the dimension the tooltip overlay element can maximal grow.
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * The tolltip will be attached to this element when it is hovered.
+     */
+    children: React.ReactNode | React.ReactNode[];
 }
 
 function Tooltip({
@@ -23,7 +30,6 @@ function Tooltip({
     className = "",
     size = "medium",
     addIndicator = false,
-    tooltipProps = {},
     ...otherProps
 }: TooltipProps) {
     return (
@@ -32,13 +38,12 @@ function Tooltip({
             hoverOpenDelay={500}
             {...otherProps}
             content={content}
-            {...tooltipProps}
             className={
                 `${eccgui}-tooltip__wrapper` +
                 (className ? " " + className : "") +
-                (addIndicator === true ? " " + BlueprintClassNames.TOOLTIP_INDICATOR : "")
+                (addIndicator === true ? " " + TOOLTIP2_INDICATOR : "")
             }
-            targetClassName={`${eccgui}-tooltip__target` + (className ? " " + className + "__target" : "")}
+            //targetClassName={`${eccgui}-tooltip__target` + (className ? " " + className + "__target" : "")}
             popoverClassName={
                 `${eccgui}-tooltip__content` +
                 ` ${eccgui}-tooltip--${size}` +

package/src/components/Tooltip/tooltip.scss

@@ -3,16 +3,16 @@ $eccgui-size-typo-tooltip: $eccgui-size-typo-caption !default;
 $eccgui-size-typo-tooltip-lineheight: $eccgui-size-typo-caption-lineheight !default;
 $eccgui-size-tooltip-width: 20em !default;
 // library vars
-$tooltip-background-color: $eccgui-color-applicationheader-text; // !default;
-$tooltip-text-color: $eccgui-color-applicationheader-background; // !default;
+$tooltip2-background-color: $eccgui-color-applicationheader-text; // !default;
+$tooltip2-text-color: $eccgui-color-applicationheader-background; // !default;
 // $dark-tooltip-background-color: $light-gray3 !default;
 // $dark-tooltip-text-color: $dark-gray5 !default;
-$tooltip-padding-vertical: $eccgui-size-block-whitespace/4; // !default;
-$tooltip-padding-horizontal: $eccgui-size-block-whitespace/2; // !default;
+$tooltip2-padding-vertical: $eccgui-size-block-whitespace/4; // !default;
+$tooltip2-padding-horizontal: $eccgui-size-block-whitespace/2; // !default;
 
-@import "~@blueprintjs/core/src/components/tooltip/tooltip";
+@import "~@blueprintjs/popover2/src/tooltip2";
 
-.#{$ns}-tooltip {
+.#{$ns}-tooltip2 {
     font-size: $eccgui-size-typo-tooltip;
     line-height: $eccgui-size-typo-tooltip-lineheight;
     white-space: normal;

package/src/components/Typography/typography.scss

@@ -209,6 +209,7 @@ table {
     white-space: nowrap;
     // display: inherit;
     max-width: 100%;
+    vertical-align: middle;
 }
 
 .#{$eccgui}-typography__overflowtext--inline {

package/src/components/interfaces.ts

@@ -1,3 +1,5 @@
 export interface TestableComponent {
     "data-test-id"?: string
-}
+}
+
+export type { ContextOverlayProps } from "./ContextOverlay/ContextOverlay";

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

@@ -2,16 +2,17 @@ import React, {memo} from 'react';
 import {ContextOverlay} from "../../../index";
 import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
 import {
-    IPopoverProps as IBlueprintPopoverProps,
     PopoverInteractionKind as BlueprintPopoverInteractionKind,
 } from "@blueprintjs/core";
 
+import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
+
 interface PosOffset {
     left: number;
     top: number;
 }
 
-export interface EdgeToolsProps extends IBlueprintPopoverProps {
+export interface EdgeToolsProps extends Omit<ContextOverlayProps, "children"> {
     posOffset: PosOffset;
     children: string | JSX.Element | JSX.Element[];
 }
@@ -30,9 +31,10 @@ export const EdgeTools = memo(
                     autoFocus={true}
                     interactionKind={BlueprintPopoverInteractionKind.HOVER}
                     content={<div className={`${eccgui}-graphviz__edgetools-content`}>{children}</div>}
-                    target={<div className={`${eccgui}-graphviz__edgetools-target`} style={{ ...posOffset }} />}
                     popoverClassName={`${eccgui}-graphviz__edgetools-overlay`}
-                />
+                >
+                    <div className={`${eccgui}-graphviz__edgetools-target`} style={{ ...posOffset }} />
+                </ContextOverlay>
             </div>
         );
     }

package/src/extensions/react-flow/handles/HandleContent.tsx

@@ -25,7 +25,6 @@ export const HandleContent = memo(({
         return (
             <Tooltip
                 content={extendedTooltip}
-                wrapperTagName="div"
                 autoFocus={false}
                 enforceFocus={false}
                 openOnTargetFocus={false}