@eccenca/gui-elements 24.0.0-rc.4 → 24.0.0

package/src/components/Typography/stories/WhiteSpaceContainer.stories.tsx

@@ -1,26 +1,23 @@
 import React from "react";
-import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { WhiteSpaceContainer as WhiteSpaceContainerElement } from "../../../index";
+import { WhiteSpaceContainer } from "../../../index";
+
+import { Default as HtmlContentBlockStrory } from "./HtmlContentBlock.stories";
 
 const whiteSpaceSizeOptions = {
-    control: "select",
-    options: {
+    control: { type: "select" },
+    options: ["not set", "tiny", "small", "regular", "large", "xlarge"],
+    mapping: {
         "not set": undefined,
-        tiny: "tiny",
-        small: "small",
-        regular: "regular",
-        large: "large",
-        xlarge: "xlarge",
     },
 };
 
 export default {
-    title: "Components/Typography",
-    component: WhiteSpaceContainerElement,
+    title: "Components/Typography/WhiteSpaceContainer",
+    component: WhiteSpaceContainer,
     argTypes: {
-        children: { control: "none" },
+        children: { control: false },
         marginTop: { ...whiteSpaceSizeOptions },
         marginRight: { ...whiteSpaceSizeOptions },
         marginBottom: { ...whiteSpaceSizeOptions },
@@ -30,27 +27,15 @@ export default {
         paddingBottom: { ...whiteSpaceSizeOptions },
         paddingLeft: { ...whiteSpaceSizeOptions },
     },
-} as Meta<typeof WhiteSpaceContainerElement>;
+} as Meta<typeof WhiteSpaceContainer>;
 
-const Template: StoryFn<typeof WhiteSpaceContainerElement> = (args) => (
-    <WhiteSpaceContainerElement {...args} style={{ background: "#eee" }} />
+const Template: StoryFn<typeof WhiteSpaceContainer> = (args) => (
+    <WhiteSpaceContainer {...args} style={{ background: "#eee" }} />
 );
 
-const testContent = loremIpsum({
-    p: 2,
-    avgSentencesPerParagraph: 4,
-    random: false,
-}).toString();
-
-export const WhiteSpaceContainer = Template.bind({});
-WhiteSpaceContainer.args = {
-    children: [
-        <p>{testContent}</p>,
-        <p>
-            <strong>{testContent.replaceAll(" ", "")}</strong>
-        </p>,
-        <p>{testContent}</p>,
-    ],
+export const Default = Template.bind({});
+Default.args = {
+    children: HtmlContentBlockStrory.args.children,
     paddingTop: "tiny",
     paddingRight: "small",
     paddingBottom: "regular",

package/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}

package/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);
             },
         };

package/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"]}
             />

package/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;

package/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>
     );
 };