Merge branch 'release/v24.0.0' into fix/downloadAndWriteZip-CMEM-6093…

…-CMEM-6108

CHANGELOG.md

@@ -6,7 +6,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
-This is a major release, and it might be not compatibel with your current usage of our library. Please read about the necessary changes in the section about how to migrate.
+This is a major release, and it might be not compatible with your current usage of our library. Please read about the necessary changes in the section about how to migrate.
 
 ### Migration from v23 to v24
 
@@ -54,6 +54,10 @@ This is a major release, and it might be not compatibel with your current usage
 -   `$eccgui-selector-text-spot-highlight` config variable to specify selector that is used to create shortly highlighted spots
     -   it is highlighted when the selector is also active local anchor target or if it has the `.eccgui-typography--spothighlight` class attached to it
 
+### Fixed
+
+-   toggling on/off the `<HandleTools/>` was corrected, they kept displayed after re-entering with the cursor
+
 ### Changed
 
 -   GUI elements library needs node 18 or an higher version because dependencies were upgraded

package.json

@@ -161,7 +161,9 @@
     },
     "resolutions": {
         "**/@types/react": "^17.0.80",
-        "node-sass-package-importer/**/postcss": "^8.4.41"
+        "node-sass-package-importer/**/postcss": "^8.4.41",
+        "**/cross-spawn": "^7.0.5 ",
+        "**/micromatch": "^4.0.8"
     },
     "husky": {
         "hooks": {

src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -240,15 +240,9 @@ const AutoSuggestion = ({
     }, [cm, editorState]);
 
     const dispatch = // eslint-disable-next-line @typescript-eslint/no-empty-function
-    (typeof editorState?.cm?.dispatch === "function" ? editorState?.cm?.dispatch : () => {}) as EditorView["dispatch"];
-
-    React.useEffect(() => {
-        if (initialValue != null && cm) {
-            dispatch({
-                changes: { from: 0, to: cm?.state?.doc.length, insert: initialValue },
-            });
-        }
-    }, [initialValue, cm]);
+        (
+            typeof editorState?.cm?.dispatch === "function" ? editorState?.cm?.dispatch : () => {}
+        ) as EditorView["dispatch"];
 
     React.useEffect(() => {
         editorState.dropdownShown = shouldShowDropdown;
@@ -610,23 +604,34 @@ const AutoSuggestion = ({
     );
 
     const codeEditor = React.useMemo(() => {
-        return <ExtendedCodeEditor
-            mode={mode}
-            setCM={setCM}
-            onChange={handleChange}
-            onCursorChange={handleCursorChange}
-            initialValue={initialValue}
-            onFocusChange={handleInputFocus}
-            onKeyDown={handleInputEditorKeyPress}
-            enableTab={useTabForCompletions}
-            placeholder={placeholder}
-            onSelection={onSelection}
-            showScrollBar={showScrollBar}
-            multiline={multiline}
-            onMouseDown={handleInputMouseDown}
-        />
-
-    }, [mode, setCM, handleChange, initialValue, useTabForCompletions, placeholder, showScrollBar, multiline, handleInputMouseDown])
+        return (
+            <ExtendedCodeEditor
+                mode={mode}
+                setCM={setCM}
+                onChange={handleChange}
+                onCursorChange={handleCursorChange}
+                initialValue={initialValue}
+                onFocusChange={handleInputFocus}
+                onKeyDown={handleInputEditorKeyPress}
+                enableTab={useTabForCompletions}
+                placeholder={placeholder}
+                onSelection={onSelection}
+                showScrollBar={showScrollBar}
+                multiline={multiline}
+                onMouseDown={handleInputMouseDown}
+            />
+        );
+    }, [
+        mode,
+        setCM,
+        handleChange,
+        initialValue,
+        useTabForCompletions,
+        placeholder,
+        showScrollBar,
+        multiline,
+        handleInputMouseDown,
+    ]);
 
     const hasError = !!value.current && !pathIsValid && !pathValidationPending;
     const autoSuggestionInput = (

src/components/Tooltip/Tooltip.tsx

@@ -20,7 +20,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      */
     size?: "small" | "medium" | "large";
     /**
-     * The tolltip will be attached to this element when it is hovered.
+     * The tooltip will be attached to this element when it is hovered.
      */
     children: React.ReactNode | React.ReactNode[];
     /**

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

@@ -26,7 +26,7 @@ export const HandleContent = memo(
             <></>
         );
 
-        if (extendedTooltip && tooltipProps?.isOpen) {
+        if (extendedTooltip) {
             return (
                 <Tooltip
                     content={extendedTooltip}

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

@@ -1,6 +1,7 @@
 import React, { memo } from "react";
 import { Handle as HandleLegacy, HandleProps as ReactFlowHandleLegacyProps } from "react-flow-renderer";
 import { Handle as HandleNext, HandleProps as ReactFlowHandleNextProps } from "react-flow-renderer-lts";
+import { Classes as BlueprintClasses } from "@blueprintjs/core";
 
 import { intentClassName, IntentTypes } from "../../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
@@ -44,34 +45,11 @@ export const HandleDefault = memo(
         const flowVersionCheck = flowVersion || evaluateFlowVersion;
         const handleDefaultRef = React.useRef<any>();
         const [extendedTooltipDisplayed, setExtendedTooltipDisplayed] = React.useState<boolean>(false);
-        const [handleToolsDisplayed, setHandleToolsDisplayed] = React.useState<boolean>(false);
 
-        const routeClickToTools = React.useCallback(
-            (e: Event) => {
-                const toolsTarget = handleDefaultRef.current.getElementsByClassName(
-                    `${eccgui}-graphviz__handletools-target`
-                );
-                if (toolsTarget.length > 0 && e.target === handleDefaultRef.current) {
-                    setHandleToolsDisplayed(true);
-                    setExtendedTooltipDisplayed(false);
-                }
-            },
-            [handleDefaultRef]
-        );
-
-        React.useEffect(() => {
-            const toolsTarget = handleDefaultRef.current.getElementsByClassName(
-                `${eccgui}-graphviz__handletools-target`
-            );
-            if (toolsTarget && toolsTarget[0] && handleToolsDisplayed) {
-                toolsTarget[0].click();
-            }
-        }, [handleToolsDisplayed]);
+        let toolsTarget: HTMLElement[];
 
         React.useEffect(() => {
-            const toolsTarget = handleDefaultRef.current.getElementsByClassName(
-                `${eccgui}-graphviz__handletools-target`
-            );
+            toolsTarget = handleDefaultRef.current.getElementsByClassName(`${eccgui}-graphviz__handletools-target`);
             if (toolsTarget && toolsTarget[0]) {
                 // Polyfill for FF that does not support the `:has()` pseudo selector until at least version 119 or 120
                 // need to be re-evaluated then
@@ -97,7 +75,7 @@ export const HandleDefault = memo(
             },
             intent: intent,
             className: `${eccgui}-graphviz__handle__tooltip-target`,
-            isOpen: extendedTooltipDisplayed && !handleToolsDisplayed,
+            isOpen: extendedTooltipDisplayed,
         };
 
         const handleContentProps = {
@@ -111,6 +89,8 @@ export const HandleDefault = memo(
         const handleContent = <HandleContent {...handleContentProps}>{children}</HandleContent>;
 
         let switchTooltipTimerOn: ReturnType<typeof setTimeout>;
+        let switchToolsTimerOff: ReturnType<typeof setTimeout>;
+
         const handleConfig = {
             ...handleProps,
             ...tooltipTitle,
@@ -119,18 +99,26 @@ export const HandleDefault = memo(
                 if (handleProps.onClick) {
                     handleProps.onClick(e);
                 }
-                routeClickToTools(e);
+                if (toolsTarget.length > 0 && e.target === handleDefaultRef.current) {
+                    setExtendedTooltipDisplayed(false);
+                    toolsTarget[0].click();
+                }
             },
             "data-category": category,
-            onMouseEnter: () => {
-                switchTooltipTimerOn = setTimeout(
-                    () => setExtendedTooltipDisplayed(true),
-                    data?.tooltipProps?.hoverOpenDelay ?? 500
-                );
-                setHandleToolsDisplayed(false);
+            onMouseEnter: (e: any) => {
+                if (switchToolsTimerOff) clearTimeout(switchToolsTimerOff);
+                if (e.target === handleDefaultRef.current) {
+                    switchTooltipTimerOn = setTimeout(
+                        () => setExtendedTooltipDisplayed(true),
+                        data?.tooltipProps?.hoverOpenDelay ?? 500
+                    );
+                }
             },
             onMouseLeave: () => {
                 if (switchTooltipTimerOn) clearTimeout(switchTooltipTimerOn);
+                if (toolsTarget.length > 0 && toolsTarget[0].classList.contains(BlueprintClasses.POPOVER_OPEN)) {
+                    switchToolsTimerOff = setTimeout(() => toolsTarget[0].click(), 500);
+                }
                 setExtendedTooltipDisplayed(false);
             },
         };

src/extensions/react-flow/handles/HandleTools.tsx

@@ -18,8 +18,9 @@ export const HandleTools = ({ children, ...otherContextOverlayProps }: HandleToo
     const configToolsDisplayed = toolsDisplayed
         ? {
               defaultIsOpen: true,
-              autoFocus: true,
-              interactionKind: BlueprintPopoverInteractionKind.HOVER,
+              autoFocus: false,
+              interactionKind: BlueprintPopoverInteractionKind.CLICK,
+              openOnTargetFocus: true,
               onClosing: () => setToolsDisplayed(false),
           }
         : {
@@ -38,7 +39,7 @@ export const HandleTools = ({ children, ...otherContextOverlayProps }: HandleToo
             popoverClassName={`${eccgui}-graphviz__handletools-overlay`}
         >
             <div
-                className={`${eccgui}-graphviz__handletools-target`}
+                className={`${eccgui}-graphviz__handletools-placeholder`}
                 data-test-id={otherContextOverlayProps["data-test-id"]}
                 data-testid={otherContextOverlayProps["data-testid"]}
             />

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

@@ -230,7 +230,8 @@ div.react-flow__handle-bottom {
     }
 }
 
-.#{$eccgui}-graphviz__handletools-target {
+.#{$eccgui}-graphviz__handletools-target,
+.#{$eccgui}-graphviz__handletools-placeholder {
     position: absolute;
     top: 0;
     left: 0;

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Elements, ReactFlowProvider } from "react-flow-renderer";
+import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { Definitions } from "../../../../common/Intent";
@@ -63,15 +64,17 @@ const HandleDefaultExample = (args: any) => {
     );
 
     return (
-        <ReactFlowProvider>
-            <ReactFlow
-                elements={elements}
-                style={{ height: "400px" }}
-                onLoad={onLoad}
-                edgeTypes={edgeTypes}
-                defaultZoom={1}
-            />
-        </ReactFlowProvider>
+        <OverlaysProvider>
+            <ReactFlowProvider>
+                <ReactFlow
+                    elements={elements}
+                    style={{ height: "400px" }}
+                    onLoad={onLoad}
+                    edgeTypes={edgeTypes}
+                    defaultZoom={1}
+                />
+            </ReactFlowProvider>
+        </OverlaysProvider>
     );
 };
 

yarn.lock

@@ -5134,7 +5134,7 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-braces@^3.0.2, braces@^3.0.3, braces@~3.0.2:
+braces@^3.0.3, braces@~3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
   integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
@@ -5779,10 +5779,10 @@ crelt@^1.0.5:
   resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
   integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
-  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3, "cross-spawn@^7.0.5 ":
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
+  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
   dependencies:
     path-key "^3.1.0"
     shebang-command "^2.0.0"
@@ -9643,18 +9643,10 @@ micromark@^3.0.0:
     micromark-util-types "^1.0.1"
     uvu "^0.5.0"
 
-micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
-  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
-  dependencies:
-    braces "^3.0.2"
-    picomatch "^2.3.1"
-
-micromatch@~4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.7.tgz#33e8190d9fe474a9895525f5618eee136d46c2e5"
-  integrity sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==
+micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5, micromatch@^4.0.8, micromatch@~4.0.7:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
   dependencies:
     braces "^3.0.3"
     picomatch "^2.3.1"