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

package/src/components/Tooltip/tooltip.scss

@@ -38,6 +38,7 @@ $tooltip-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
 }
 
 .#{$eccgui}-tooltip__content {
+
     a {
         color: inherit;
         text-decoration: none;
@@ -66,3 +67,23 @@ $tooltip-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
     --cds-popover-background-color: #{$tooltip-background-color};
     --cds-popover-text-color: #{$tooltip-text-color};
 }
+
+.#{$ns}-popover-content {
+    .#{$ns}-tooltip.#{$ns}-intent-primary & {
+        color: $eccgui-color-primary-contrast;
+        background-color: $eccgui-color-primary;
+    }
+    .#{$ns}-tooltip.#{$eccgui}-intent--accent & {
+        color: $eccgui-color-accent-contrast;
+        background-color: $eccgui-color-accent;
+    }
+}
+
+.#{$ns}-popover-arrow-fill {
+    .#{$ns}-tooltip.#{$ns}-intent-primary & {
+        fill: $eccgui-color-primary;
+    }
+    .#{$ns}-tooltip.#{$eccgui}-intent--accent & {
+        fill: $eccgui-color-accent;
+    }
+}

package/src/components/index.scss

@@ -46,3 +46,4 @@
 @import "./PropertyValuePair/propertyvalue";
 @import "./MultiSuggestField/multisuggestfield";
 @import "./ContentGroup/contentgroup";
+@import "./ProgressBar/progressbar";

package/src/extensions/codemirror/_codemirror.scss

@@ -64,6 +64,18 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
             padding: 0;
         }
 
+        &:has(.cm-content[aria-readonly="true"]) {
+            box-shadow: inset 0 0 0 1px $pt-divider-black;
+
+            &:focus {
+                box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
+            }
+
+            .cm-cursor {
+                display: none;
+            }
+        }
+
         &[class*="#{$eccgui}-intent--"] {
             animation-duration: 1s;
             animation-delay: 0.5s;

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

@@ -21,7 +21,7 @@ export const HandleContent = memo(
                 {children}
             </div>
         ) : extendedTooltip ? (
-            <div className={`${eccgui}-graphviz__handle__content`} {...otherDivProps} />
+            <div className={`${eccgui}-graphviz__handle__content ${eccgui}-graphviz__handle__content--extendedTooltip`} {...otherDivProps} />
         ) : (
             <></>
         );
@@ -33,6 +33,7 @@ export const HandleContent = memo(
                     autoFocus={false}
                     enforceFocus={false}
                     openOnTargetFocus={false}
+                    usePlaceholder={false}
                     {...tooltipProps}
                 >
                     {handleContent}

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";