@eccenca/gui-elements 23.2.0 → 23.3.0-rc.0

package/src/components/Separation/Spacing.tsx

@@ -1,38 +1,42 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface SpacingProps {
+export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Set the amount of white space that separates two elements.
      */
-    size?: "tiny" | "small" | "medium" | "large" | "xlarge"
+    size?: "tiny" | "small" | "medium" | "large" | "xlarge";
     /**
      * If set then is a ruler displayed in the middle of the spacing area.
      * The direction of the ruler is used from the spacing.
      */
-    hasDivider?: boolean
+    hasDivider?: boolean;
     /**
      * If set then the spacing separates two elements on the horizontal axis.
      * The spacing area then is created on a vertical axis.
      */
-    vertical?: boolean
+    vertical?: boolean;
 }
 
 /**
  * Adds horizontal or vertical space between neighbouring elements.
  * It also can add a visual ruler inside.
  */
-export const Spacing = ({ size = "medium", hasDivider = false, vertical = false }: SpacingProps) => {
+export const Spacing = ({ size = "medium", hasDivider = false, vertical = false, ...otherDivProps }: SpacingProps) => {
     const direction = vertical ? "vertical" : "horizontal";
     return (
         <div
             className={
-                `${eccgui}-separation__spacing-` + direction +
-                ` ${eccgui}-separation__spacing--` + size +
+                `${eccgui}-separation__spacing-` +
+                direction +
+                ` ${eccgui}-separation__spacing--` +
+                size +
                 (hasDivider ? ` ${eccgui}-separation__spacing--hasdivider` : "")
             }
+            {...otherDivProps}
         />
     );
-}
+};
 
 export default Spacing;

package/src/components/TextField/TextField.tsx

@@ -1,15 +1,15 @@
-import React from "react";
+import React, {KeyboardEventHandler, RefObject} from "react";
 import {
-    InputGroup as BlueprintInputGroup,
     Classes as BlueprintClassNames,
-    Intent as BlueprintIntent,
-    MaybeElement,
     HTMLInputProps,
+    InputGroup as BlueprintInputGroup,
     InputGroupProps2,
+    Intent as BlueprintIntent,
+    MaybeElement,
 } from "@blueprintjs/core";
-import { IntentTypes, Definitions as IntentDefinitions } from "../../common/Intent";
+import {Definitions as IntentDefinitions, IntentTypes} from "../../common/Intent";
 import Icon from "../Icon/Icon";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 import {ValidIconName} from "../Icon/canonicalIconNames";
 import {InvisibleCharacterWarningProps, useTextValidation} from "./useTextValidation";
 
@@ -50,6 +50,9 @@ export interface TextFieldProps extends Partial<Omit<InputGroupProps2, "intent"
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
     invisibleCharacterWarning?: InvisibleCharacterWarningProps
+
+    /** If true pressing the Escape key will blur/de-focus the input field. Default: false */
+    escapeToBlur?: boolean
 }
 
 /**
@@ -64,8 +67,10 @@ export const TextField = ({
   fullWidth = true,
   leftIcon,
   invisibleCharacterWarning,
+  escapeToBlur = false,
   ...otherProps
 }: TextFieldProps) => {
+    const inputRef = React.useRef<HTMLInputElement | null>(null)
   let deprecatedIntent;
   switch (true) {
     case hasStatePrimary:
@@ -84,6 +89,25 @@ export const TextField = ({
       break;
   }
 
+    const handleLabelEscape = React.useCallback(() => {
+        inputRef.current?.blur()
+        if(otherProps.inputRef) {
+            const otherInputRef = otherProps.inputRef as RefObject<HTMLInputElement>
+            if(otherInputRef.current) {
+                otherInputRef.current.blur()
+            }
+        }
+    }, [])
+
+    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = React.useCallback((event) => {
+        if(escapeToBlur && event.key === "Escape") {
+            event.preventDefault()
+            handleLabelEscape()
+            return false
+        }
+        return otherProps.onKeyDown?.(event)
+    }, [otherProps.onKeyDown, escapeToBlur])
+
   const {
       intent = deprecatedIntent,
       ...otherBlueprintInputGroupProps
@@ -110,6 +134,7 @@ export const TextField = ({
 
   return (
     <BlueprintInputGroup
+        inputRef={inputRef}
       className={
           `${eccgui}-textfield` +
           (intent ? ` ${eccgui}-intent--${intent}` : "") +
@@ -133,6 +158,7 @@ export const TextField = ({
       }
       dir={"auto"}
       onChange={maybeWrappedOnChange}
+        onKeyDown={otherProps.onKeyDown || escapeToBlur ? onKeyDown : undefined}
     />
   );
 }

package/src/components/Tooltip/tooltip.scss

@@ -2,6 +2,7 @@
 $eccgui-size-typo-tooltip: $eccgui-size-typo-caption !default;
 $eccgui-size-typo-tooltip-lineheight: $eccgui-size-typo-caption-lineheight !default;
 $eccgui-size-tooltip-width: 20em !default;
+
 // library vars
 $tooltip2-background-color: $eccgui-color-applicationheader-text; // !default;
 $tooltip2-text-color: $eccgui-color-applicationheader-background; // !default;
@@ -15,8 +16,8 @@ $tooltip2-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
 .#{$ns}-tooltip2 {
     font-size: $eccgui-size-typo-tooltip;
     line-height: $eccgui-size-typo-tooltip-lineheight;
-    white-space: normal;
     overflow-wrap: break-word;
+    white-space: normal;
 }
 
 .#{$eccgui}-tooltip--small {
@@ -39,3 +40,16 @@ $tooltip2-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
         text-decoration: none;
     }
 }
+
+.#{$prefix}--tooltip-content {
+    max-width: $eccgui-size-tooltip-width;
+    padding: 0.25 * $eccgui-size-block-whitespace 0.5 * $eccgui-size-block-whitespace;
+    // align Carbon tooltips, they are used automatically by a few carbon based elements, e.g. pagination buttons
+    font-size: $eccgui-size-typo-tooltip;
+    line-height: $eccgui-size-typo-tooltip-lineheight;
+    overflow-wrap: break-word;
+    white-space: normal;
+
+    --cds-popover-background-color: #{$tooltip2-background-color};
+    --cds-popover-text-color: #{$tooltip2-text-color};
+}

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,12 +1,32 @@
-import React, { useEffect, useRef } from "react";
-import CodeMirror from "codemirror";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import React, { TextareaHTMLAttributes, useEffect, useRef } from "react";
+import CodeMirror, { ModeSpec, ModeSpecOptions } from "codemirror";
+
 import "codemirror/mode/markdown/markdown.js";
 import "codemirror/mode/python/python.js";
 import "codemirror/mode/sparql/sparql.js";
 import "codemirror/mode/sql/sql.js";
 import "codemirror/mode/turtle/turtle.js";
 import "codemirror/mode/xml/xml.js";
+import "codemirror/mode/jinja2/jinja2.js";
+import "codemirror/mode/yaml/yaml.js";
+import "codemirror/mode/javascript/javascript.js";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export const supportedCodeEditorModes = [
+    "markdown",
+    "python",
+    "sparql",
+    "sql",
+    "turtle",
+    "xml",
+    "jinja2",
+    "yaml",
+    "json",
+    "undefined",
+] as const;
+type SupportedModesTuple = typeof supportedCodeEditorModes;
+export type SupportedCodeEditorModes = SupportedModesTuple[number];
 
 export interface CodeEditorProps {
     /**
@@ -26,7 +46,7 @@ export interface CodeEditorProps {
     /**
      * Syntax mode of the code editor.
      */
-    mode?: "markdown" | "python" | "sparql" | "sql" | "turtle" | "xml" | "undefined";
+    mode?: SupportedCodeEditorModes;
     /**
      * Default value used first when the editor is instanciated.
      */
@@ -35,6 +55,17 @@ export interface CodeEditorProps {
      * If enabled the code editor won't show numbers before each line.
      */
     preventLineNumbers?: boolean;
+
+    /** Set read-only mode. Default: false */
+    readOnly?: boolean;
+
+    /** Optional height of the component */
+    height?: number | string;
+
+    /** Long lines are wrapped and displayed on multiple lines */
+    wrapLines?: boolean;
+
+    outerDivAttributes?: Partial<TextareaHTMLAttributes<HTMLDivElement>>;
 }
 
 /**
@@ -47,29 +78,38 @@ export const CodeEditor = ({
     mode = "undefined",
     preventLineNumbers = false,
     defaultValue,
+    readOnly = false,
+    height,
+    wrapLines = false,
+    outerDivAttributes,
 }: CodeEditorProps) => {
     const domRef = useRef<HTMLTextAreaElement>(null);
 
     useEffect(() => {
         const editorInstance = CodeMirror.fromTextArea(domRef.current!, {
-            mode: mode === "undefined" ? undefined : mode,
-            lineWrapping: true,
+            mode: convertMode(mode),
+            lineWrapping: wrapLines,
             lineNumbers: !preventLineNumbers,
             tabSize: 2,
             theme: "xq-light",
+            readOnly: readOnly,
         });
 
         editorInstance.on("change", (api) => {
             onChange(api.getValue());
         });
 
+        if (height) {
+            editorInstance.setSize(null, height);
+        }
+
         return function cleanup() {
             editorInstance.toTextArea();
         };
     }, [onChange, mode, preventLineNumbers]);
 
     return (
-        <div className={`${eccgui}-codeeditor`}>
+        <div {...outerDivAttributes} className={`${eccgui}-codeeditor`}>
             <textarea
                 ref={domRef}
                 /**
@@ -78,10 +118,24 @@ export const CodeEditor = ({
                  * unchanged from the code what was took over here.
                  */
                 data-test-id="codemirror-wrapper"
-                id={!!id ? id : `codemirror-${name}`}
+                id={id ? id : `codemirror-${name}`}
                 name={name}
                 defaultValue={defaultValue}
             />
         </div>
     );
 };
+
+const convertMode = (mode: SupportedCodeEditorModes | undefined): string | ModeSpec<ModeSpecOptions> | undefined => {
+    switch (mode) {
+        case "undefined":
+            return undefined;
+        case "json":
+            return {
+                name: "javascript",
+                json: true,
+            };
+        default:
+            return mode;
+    }
+};

package/src/extensions/codemirror/_codemirror.scss

@@ -2,31 +2,76 @@
 @import "~codemirror/theme/xq-light";
 
 // adjustments
-
+// stylelint-disable selector-class-pattern
 .#{$eccgui}-codeeditor {
+    max-width: 100%;
+
     .CodeMirror {
-        border-radius: $pt-border-radius;
         clip-path: unset !important; // we may check later why they set inset(0) now
+        border-radius: $pt-border-radius;
 
         // get them a "border" like input boxes from blueprintjs
         box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;
+
         &.CodeMirror-focused {
             box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
         }
 
-        .CodeMirror-gutters {
-            // allow "borders" to shine through
-            background-color: rgba(0,0,0,0.05);
-        }
-
         .CodeMirror-scroll {
+            width: calc(100% - 2px);
+            height: calc(100% - 2px);
+
+            // fix size to prevent wrong calculation of other elements
+            padding: 0;
+            margin: 1px;
             cursor: text;
+
+            // remove scrollbars, codemirrow has own elements to fake them
+            scrollbar-width: none; // Firefox
+            -ms-overflow-style: none; // IE, Edge
+            &::-webkit-scrollbar {
+                display: none; // Chrome, Safari and Opera
+            }
+        }
+
+        .CodeMirror-hscrollbar {
+            bottom: 1px;
+            height: $eccgui-size-inline-whitespace !important;
+        }
+
+        .CodeMirror-vscrollbar {
+            top: 1px;
+            right: 1px;
+            width: $eccgui-size-inline-whitespace !important;
+        }
+
+        .CodeMirror-scrollbar-filler {
+            right: 1px;
+            bottom: 1px;
+        }
+
+        .CodeMirror-sizer {
+            border-right-width: $eccgui-size-inline-whitespace !important;
         }
     }
 }
 
 .#{$prefix}--accordion__content {
-    .CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber {
+    .CodeMirror-scroll,
+    .CodeMirror-sizer,
+    .CodeMirror-gutter,
+    .CodeMirror-gutters,
+    .CodeMirror-linenumber {
         box-sizing: content-box;
     }
 }
+
+// fix a few xq-light colors regarding bad contrasts
+
+.cm-s-xq-light {
+    // add other classes if necessary
+    .cm-meta {
+        filter: invert(1);
+    }
+}
+// stylelint-enable selector-class-pattern

package/src/extensions/react-flow/edges/stories/EdgeDefault.stories.tsx

@@ -1,24 +1,24 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { ReactFlow, EdgeLabel, EdgeLabelObject } from "./../../../../../index";
-import { ArrowHeadType, Elements, getMarkerEnd, ReactFlowProvider } from 'react-flow-renderer';
+import React, { useCallback, useEffect, useState } from "react";
+import { ArrowHeadType, Elements, getMarkerEnd, ReactFlowProvider } from "react-flow-renderer";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
+import { EdgeLabel, EdgeLabelObject, ReactFlow } from "./../../../../../index";
 import { EdgeDefault, EdgeDefaultDataProps as EdgeData } from "./../EdgeDefault";
 import { edgeTypes } from "./../edgeTypes";
 
 const EdgeDefaultDataProps = (data: EdgeData) => {
     // this is only a mock to get it as sub element in the table
     return <></>;
-}
+};
 
 export default {
-    title: "Extensions/React Flow/Default Edge",
+    title: "Extensions/React Flow/Edge",
     component: EdgeDefault,
     subcomponents: { EdgeDefaultDataProps },
     argTypes: {
         type: {
             control: "select",
-            options: [...(Object.keys(edgeTypes))],
+            options: [...Object.keys(edgeTypes)],
         },
     },
 } as ComponentMeta<typeof EdgeDefault>;
@@ -33,7 +33,9 @@ const EdgeDefaultExample = (args: any) => {
                 id: args.source,
                 type: "default",
                 data: {
-                    label: "Default ", content: "Example content.", minimalShape: "none",
+                    label: "Default ",
+                    content: "Example content.",
+                    minimalShape: "none",
                 },
                 position: { x: 50, y: 200 },
             },
@@ -41,13 +43,15 @@ const EdgeDefaultExample = (args: any) => {
                 id: args.target,
                 type: "default",
                 data: {
-                    label: "Default ", content: "Example content.", minimalShape: "none",
+                    label: "Default ",
+                    content: "Example content.",
+                    minimalShape: "none",
                 },
                 position: { x: 600, y: 200 },
             },
             {
-                ...args
-            }
+                ...args,
+            },
         ] as Elements);
     }, [args]);
 
@@ -60,31 +64,30 @@ const EdgeDefaultExample = (args: any) => {
         [reactflowInstance]
     );
 
-    return <ReactFlowProvider>
-        <ReactFlow
-            elements={elements}
-            style={{ height: '400px' }}
-            onLoad={onLoad}
-            edgeTypes={ edgeTypes }
-            defaultZoom={1}
-        />
-    </ReactFlowProvider>
-}
+    return (
+        <ReactFlowProvider>
+            <ReactFlow
+                elements={elements}
+                style={{ height: "400px" }}
+                onLoad={onLoad}
+                edgeTypes={edgeTypes}
+                defaultZoom={1}
+            />
+        </ReactFlowProvider>
+    );
+};
 
-const Template: ComponentStory<typeof EdgeDefault> = (args) => (
-    <EdgeDefaultExample {...args} />
-);
+const Template: ComponentStory<typeof EdgeDefault> = (args) => <EdgeDefaultExample {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    id: 'default',
-    type: 'dangerStep',
+    id: "default",
+    type: "dangerStep",
     label: "edge",
     arrowHeadType: "arrowclosed",
-    source: 'node-1',
-    target: 'node-2',
-    data: {
-    }
+    source: "node-1",
+    target: "node-2",
+    data: {},
 };
 
 export const CustomLabel = Template.bind({});
@@ -94,14 +97,12 @@ CustomLabel.args = {
     arrowHeadType: undefined,
     label: undefined,
     data: {
-        renderLabel: (
-            edgeCenter: [number, number, number, number]
-        ) => (
+        renderLabel: (edgeCenter: [number, number, number, number]) => (
             <EdgeLabelObject edgeCenter={edgeCenter}>
-                    <EdgeLabel text="Custom label that is very long" />
+                <EdgeLabel text="Custom label that is very long" />
             </EdgeLabelObject>
-        )
-    }
+        ),
+    },
 };
 
 export const InverseEdge = Template.bind({});
@@ -111,10 +112,8 @@ InverseEdge.args = {
     arrowHeadType: undefined,
     data: {
         inversePath: true,
-        markerStart: getMarkerEnd(
-            `${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType
-        ),
-    }
+        markerStart: getMarkerEnd(`${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType),
+    },
 };
 
 export const AdjustStrokeType = Template.bind({});
@@ -122,7 +121,7 @@ AdjustStrokeType.args = {
     ...Default.args,
     data: {
         strokeType: "double",
-    }
+    },
 };
 
 export const AdjustIntent = Template.bind({});
@@ -130,13 +129,13 @@ AdjustIntent.args = {
     ...Default.args,
     data: {
         intent: "warning",
-    }
+    },
 };
 
 export const AdjustHighlight = Template.bind({});
 AdjustHighlight.args = {
     ...Default.args,
     data: {
-        highlightColor: ["default", "alternate"]
-    }
+        highlightColor: ["default", "alternate"],
+    },
 };

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

@@ -1,15 +1,13 @@
-import React, {memo} from 'react';
-import {
-    HandleProps as ReactFlowHandleLegacyProps,
-    Handle as HandleLegacy,
-} from "react-flow-renderer";
-import {
-    HandleProps as ReactFlowHandleNextProps,
-    Handle as HandleNext,
-} from "react-flow-renderer-lts";
-import { HandleContent, HandleContentProps } from "./HandleContent";
+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 { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
+
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
+import { HandleContent, HandleContentProps } from "./HandleContent";
+import { HandleTools } from "./HandleTools";
+
 interface HandleExtensionProps extends ReacFlowVersionSupportProps {
     /**
      * Extended handle data.
@@ -28,37 +26,46 @@ export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNe
 
 export type HandleDefaultProps = HandleProps | HandleNextProps;
 
-export const HandleDefault = memo(({
-    flowVersion,
-    data,
-    tooltip,
-    children,
-    ...handleProps
-}: HandleDefaultProps) => {
+export const HandleDefault = memo(({ flowVersion, data, tooltip, children, ...handleProps }: HandleDefaultProps) => {
     const evaluateFlowVersion = useReactFlowVersion();
     const flowVersionCheck = flowVersion || evaluateFlowVersion;
+    const [toolsDisplayed, setToolsDisplayed] = React.useState<boolean>(false);
+
+    const handleClosing = () => {
+        setToolsDisplayed(false);
+    };
 
-    const tooltipTitle = !!tooltip ? { title: tooltip } : {};
+    const tooltipTitle = tooltip ? { title: tooltip } : {};
+    const configToolsOn = {
+        defaultIsOpen: true,
+        autoFocus: true,
+        interactionKind: BlueprintPopoverInteractionKind.HOVER,
+        onClosing: handleClosing,
+    };
+
+    const isToolsContent = children && typeof children !== "string" && children.type === HandleTools;
+    let handleContent = <HandleContent {...data}>{children}</HandleContent>;
+
+    if (isToolsContent && toolsDisplayed) {
+        handleContent = <HandleContent {...data}>{React.cloneElement(children ?? <></>, configToolsOn)}</HandleContent>;
+    }
+    if (isToolsContent && !toolsDisplayed) {
+        handleContent = <HandleContent {...data}></HandleContent>;
+    }
+    const handleClick = React.useCallback(() => setToolsDisplayed(!toolsDisplayed), []);
 
-    const handleContent = (
-        <HandleContent {...data}>
-            { children }
-        </HandleContent>
-    );
+    const handleConfig = {
+        ...handleProps,
+        ...tooltipTitle,
+        className: isToolsContent ? "clickable" : undefined,
+        onClick: isToolsContent ? handleClick : undefined,
+    };
 
     switch (flowVersionCheck) {
         case "legacy":
-            return (
-                <HandleLegacy {...handleProps} {...tooltipTitle}>
-                    { handleContent }
-                </HandleLegacy>
-            );
+            return <HandleLegacy {...handleConfig}>{handleContent}</HandleLegacy>;
         case "next":
-            return (
-                <HandleNext {...handleProps} {...tooltipTitle}>
-                    { handleContent }
-                </HandleNext>
-            );
+            return <HandleNext {...handleConfig}>{handleContent}</HandleNext>;
         default:
             return <></>;
     }

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

@@ -0,0 +1,22 @@
+import React from "react";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { ContextOverlay } from "../../../index";
+
+import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
+
+export interface HandleToolsProps extends Omit<ContextOverlayProps, "children" | "content" | "popoverClassName"> {
+    children: string | JSX.Element | JSX.Element[];
+}
+
+export const HandleTools = ({ children, ...otherContextOverlayProps }: HandleToolsProps) => {
+    return (
+        <ContextOverlay
+            {...otherContextOverlayProps}
+            content={<div className={`${eccgui}-graphviz__handletools-content`}>{children}</div>}
+            popoverClassName={`${eccgui}-graphviz__handletools-overlay`}
+        >
+            <div className={`${eccgui}-graphviz__handletools-target`} />
+        </ContextOverlay>
+    );
+};