@eccenca/gui-elements 24.0.0-rc.3 → 24.0.0-rc.5

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/components/Typography/typography.scss

@@ -184,6 +184,16 @@ pre {
         padding: $eccgui-size-block-whitespace * 0.5;
         overflow-x: auto;
         background-color: $eccgui-color-workspace-background;
+
+        & > div[style]:has(.#{$eccgui}-markdown__syntaxhighlighter) {
+            // remove styles like padding and font from prism div
+            padding: 0 !important;
+            margin: 0 !important;
+            font-family: inherit !important;
+            font-size: inherit !important;
+            line-height: inherit !important;
+            background-color: transparent !important;
+        }
     }
 }
 

package/src/components/index.scss

@@ -38,6 +38,6 @@
 @import "./Typography/typography";
 @import "./Workspace/workspace";
 @import "./Accordion/accordion";
-@import "./AutoSuggestion/AutoSuggestion";
 @import "./Badge/badge";
 @import "./PropertyValuePair/propertyvalue";
+@import "./MultiSuggestField/multisuggestfield";

package/src/extensions/_index.scss

@@ -1,9 +1,4 @@
 @import "./react-flow/react-flow";
-
-/*
-CodeMirror styles are already included by the base component styles
-because it is used as lib for elements there already. 
 @import "./codemirror/codemirror";
-*/
-
+@import "./../components/AutoSuggestion/AutoSuggestion"; // the whole element should moved to extensions forlder
 @import "./uppy/fileupload";

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,13 +1,11 @@
-import React, { AllHTMLAttributes, useRef } from "react";
+import React, { useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { foldKeymap } from "@codemirror/language";
 import { EditorState, Extension } from "@codemirror/state";
 import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
-//CodeMirror
 import { minimalSetup } from "codemirror";
 
 import { markField } from "../../components/AutoSuggestion/extensions/markText";
-//constants
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 //hooks
@@ -27,6 +25,7 @@ import {
     adaptedLineNumbers,
     adaptedPlaceholder,
 } from "./tests/codemirrorTestHelper";
+
 export interface CodeEditorProps {
     // Is called with the editor instance that allows access via the CodeMirror API
     setEditorView?: (editor: EditorView | undefined) => any;
@@ -92,7 +91,7 @@ export interface CodeEditorProps {
     /** Long lines are wrapped and displayed on multiple lines */
     wrapLines?: boolean;
 
-    outerDivAttributes?: Partial<AllHTMLAttributes<HTMLDivElement>>;
+    outerDivAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "data-test-id">;
 
     /**
      * Size in spaces that is used for a tabulator key.
@@ -276,11 +275,15 @@ export const CodeEditor = ({
 
     return (
         <div
-            id={id ? id : `codemirror-${name}`}
+            {...outerDivAttributes}
+            // overwrite/extend some attributes
+            id={id ? id : name ? `codemirror-${name}` : undefined}
             ref={parent}
             data-test-id="codemirror-wrapper"
-            className={`${eccgui}-codeeditor ${eccgui}-codeeditor--mode-${mode}`}
-            {...outerDivAttributes}
+            className={
+                `${eccgui}-codeeditor ${eccgui}-codeeditor--mode-${mode}` +
+                (outerDivAttributes?.className ? ` ${outerDivAttributes?.className}` : "")
+            }
         />
     );
 };

package/src/extensions/codemirror/_codemirror.scss

@@ -29,7 +29,6 @@ $eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default
             // fix size to prevent wrong calculation of other elements
             padding: 0;
             margin: 1px;
-            cursor: text;
         }
 
         &.cm-focused {
@@ -54,6 +53,7 @@ $eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default
         }
 
         .cm-content {
+            cursor: text;
             border-right-width: $eccgui-size-inline-whitespace !important;
         }
 

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

package/src/index.scss

@@ -50,7 +50,6 @@ $prefix-carbon: $prefix;
 // == Load basic components styles =============================================
 
 @import "./components";
-@import "./extensions/codemirror/codemirror";
 
 // set more readable variable for prefix
 $prefix-eccgui: $eccgui;