@eccenca/gui-elements 26.0.0-rc.1 → 26.0.0

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

@@ -1,10 +1,9 @@
 import React, { memo } from "react";
 import { Handle as HandleV9, HandleProps as ReactFlowHandleV9Props } from "react-flow-renderer";
 import { Classes as BlueprintClasses } from "@blueprintjs/core";
-import { Intent } from "@blueprintjs/core/src/common/intent";
 import { Handle as HandleV12, HandleProps as ReactFlowHandleV12Props } from "@xyflow/react";
 
-import { intentClassName, IntentTypes } from "../../../common/Intent";
+import { intentClassName, IntentTypes, IntentBlueprint } from "../../../common/Intent";
 import { TooltipProps } from "../../../components";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
@@ -80,30 +79,24 @@ export const HandleDefault = memo(
                 offset: {
                     enabled: true,
                     options: {
-                        offset: [3, 20],
+                        offset: [0, 20],
                     },
                 },
             },
-            intent: intent as Intent,
+            intent: intent as IntentBlueprint,
             className: `${eccgui}-graphviz__handle__tooltip-target`,
             isOpen: extendedTooltipDisplayed,
         };
 
-        const handleContentProps = React.useMemo(
-            () => ({
-                ...data,
-                tooltipProps: {
-                    ...handleContentTooltipProps,
-                    ...data?.tooltipProps,
-                } as TooltipProps,
-            }),
-            [intent, category, handleProps.isConnectable],
-        );
+        const handleContentProps = {
+            ...data,
+            tooltipProps: {
+                ...handleContentTooltipProps,
+                ...data?.tooltipProps,
+            } as TooltipProps,
+        };
 
-        const handleContent = React.useMemo(
-            () => <HandleContent {...handleContentProps}>{children}</HandleContent>,
-            [],
-        );
+        const handleContent = <HandleContent {...handleContentProps}>{children}</HandleContent>;
 
         let switchTooltipTimerOn: ReturnType<typeof setTimeout>;
         let switchToolsTimerOff: ReturnType<typeof setTimeout>;
@@ -119,7 +112,7 @@ export const HandleDefault = memo(
                     if (handleProps.onClick) {
                         handleProps.onClick(e);
                     }
-                    if (toolsTarget.length > 0 && e.target === handleDefaultRef.current) {
+                    if (toolsTarget.length > 0 && e.currentTarget === handleDefaultRef.current) {
                         setExtendedTooltipDisplayed(false);
                         (toolsTarget[0] as HTMLElement).click();
                     }
@@ -127,7 +120,7 @@ export const HandleDefault = memo(
                 "data-category": category,
                 onMouseEnter: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
                     if (switchToolsTimerOff) clearTimeout(switchToolsTimerOff);
-                    if (e.target === handleDefaultRef.current) {
+                    if (e.currentTarget === handleDefaultRef.current) {
                         switchTooltipTimerOn = setTimeout(
                             () => setExtendedTooltipDisplayed(true),
                             data?.tooltipProps?.hoverOpenDelay ?? 500,
@@ -142,7 +135,16 @@ export const HandleDefault = memo(
                     setExtendedTooltipDisplayed(false);
                 },
             }),
-            [intent, category, tooltip, handleProps.isConnectable, handleProps.style],
+            [
+                intent,
+                category,
+                tooltip,
+                flowVersionCheck,
+                handleProps.isConnectable,
+                handleProps.style,
+                handleProps.onClick,
+                data?.tooltipProps?.hoverOpenDelay,
+            ],
         );
 
         switch (flowVersionCheck) {

package/src/extensions/react-flow/handles/_handles.scss

@@ -146,7 +146,14 @@ div.react-flow__handle {
     position: absolute;
     inset: 0;
     overflow: hidden;
-    cursor: help;
+}
+
+.#{$eccgui}-graphviz__handle__content--extendedTooltip {
+    inset: unset;
+    top: 50%;
+    left: 50%;
+    height: 0;
+    width: 0;
 }
 
 div.react-flow__handle-right {

package/src/extensions/react-flow/handles/tests/HandleDefault.test.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { OverlaysProvider } from "@blueprintjs/core";
+import "@testing-library/jest-dom";
+
+import { HandleDefault } from "../HandleDefault";
+
+jest.mock("react-flow-renderer", () => {
+    const React = require("react");
+    return {
+        Handle: React.forwardRef(
+            ({ children, isConnectable, position, type, ...props }: any, ref: React.Ref<HTMLDivElement>) => (
+                <div ref={ref} {...props}>
+                    {children}
+                </div>
+            ),
+        ),
+    };
+});
+
+jest.mock("@xyflow/react", () => {
+    const React = require("react");
+    return {
+        Handle: React.forwardRef(
+            ({ children, isConnectable, position, type, ...props }: any, ref: React.Ref<HTMLDivElement>) => (
+                <div ref={ref} {...props}>
+                    {children}
+                </div>
+            ),
+        ),
+    };
+});
+
+jest.mock("../../versionsupport", () => ({
+    useReactFlowVersion: () => "v9",
+}));
+
+describe("HandleDefault", () => {
+    it("shows the extended tooltip on handle hover", async () => {
+        render(
+            <OverlaysProvider>
+                <HandleDefault
+                    type="target"
+                    isConnectable={true}
+                    data-testid="handle"
+                    data={{
+                        extendedTooltip: "This is another Tooltip",
+                        tooltipProps: {
+                            hoverOpenDelay: 0,
+                        },
+                    }}
+                />
+            </OverlaysProvider>,
+        );
+
+        fireEvent.mouseEnter(screen.getByTestId("handle"));
+
+        expect(await screen.findByText("This is another Tooltip")).toBeVisible();
+    });
+});

package/src/includes/blueprintjs/_components.scss

@@ -3,4 +3,3 @@
 @import "~@blueprintjs/core/src/components/context-menu/context-menu";
 @import "~@blueprintjs/core/src/components/overlay/overlay";
 @import "~@blueprintjs/core/src/components/portal/portal";
-@import "~@blueprintjs/core/src/components/progress-bar/progress-bar";