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

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/EdgeLabel.tsx

@@ -1,8 +1,9 @@
 import React, { memo } from "react";
-import { Icon, Depiction, DepictionProps, OverflowText } from "../../../index";
-import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
+import { intentClassName, IntentTypes } from "../../../common/Intent";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-import { IntentTypes, intentClassName } from "../../../common/Intent";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { Depiction, DepictionProps, Icon, OverflowText } from "../../../index";
 
 export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -26,62 +27,56 @@ export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
      * Stretches the label component to the full available width.
      */
     fullWidth?: boolean;
+    /**
+     * Label is diaplayed without a box that comes with borders and background color.
+     */
+    loose?: boolean;
     /**
      * Add a info state to the label, visualized by color.
      */
     intent?: IntentTypes;
 }
 
-export const EdgeLabel = memo(({
-    depiction,
-    text,
-    actions,
-    large,
-    fullWidth,
-    intent,
-    title,
-    ...otherDivProps
-} : EdgeLabelProps) => {
-
-    const depEl = (!!depiction && typeof depiction === "string")
-        ? <Depiction image={<Icon name={depiction as ValidIconName} />} />
-        : depiction;
+export const EdgeLabel = memo(
+    ({ depiction, text, actions, large, fullWidth, loose, intent, title, ...otherDivProps }: EdgeLabelProps) => {
+        const depEl =
+            !!depiction && typeof depiction === "string" ? (
+                <Depiction image={<Icon name={depiction as ValidIconName} />} />
+            ) : (
+                depiction
+            );
 
-    return (
-        <div
-            className={
-                `${eccgui}-graphviz__edge-label` +
-                (large ? ` ${eccgui}-graphviz__edge-label--large` : "") +
-                (fullWidth ? ` ${eccgui}-graphviz__edge-label--fullwidth` : "") +
-                (!!intent ? ` ${intentClassName(intent)}` : '')
-            }
-            {...otherDivProps}
-        >
-            {!!depEl && (
-                <div className={`${eccgui}-graphviz__edge-label__depiction`}>
-                    {
-                        React.cloneElement(depEl, {
+        return (
+            <div
+                className={
+                    `${eccgui}-graphviz__edge-label` +
+                    (large ? ` ${eccgui}-graphviz__edge-label--large` : "") +
+                    (fullWidth ? ` ${eccgui}-graphviz__edge-label--fullwidth` : "") +
+                    (loose ? ` ${eccgui}-graphviz__edge-label--loose` : "") +
+                    (intent ? ` ${intentClassName(intent)}` : "")
+                }
+                {...otherDivProps}
+            >
+                {!!depEl && (
+                    <div className={`${eccgui}-graphviz__edge-label__depiction`}>
+                        {React.cloneElement(depEl, {
                             padding: "tiny",
                             ratio: "1:1",
                             resizing: "contain",
                             forceInlineSvg: true,
                             border: false,
                             backgroundColor: undefined,
-                        })
-                    }
+                        })}
+                    </div>
+                )}
+                <div className={`${eccgui}-graphviz__edge-label__text`} title={title}>
+                    {typeof text === "string" ? <OverflowText>{text}</OverflowText> : text}
                 </div>
-            )}
-            <div className={`${eccgui}-graphviz__edge-label__text`} title={title}>
-                { typeof text === "string" ? <OverflowText>{ text }</OverflowText> : text }
+                {!!actions && <div className={`${eccgui}-graphviz__edge-label__aux`}>{actions}</div>}
             </div>
-            {!!actions && (
-                <div className={`${eccgui}-graphviz__edge-label__aux`}>
-                    { actions }
-                </div>
-            )}
-        </div>
-    )
-});
+        );
+    }
+);
 
 export interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObjectElement> {
     /**
@@ -99,42 +94,44 @@ export interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObje
     resizeTimeout?: number;
 }
 
-export const EdgeLabelObject = memo(({
-    children,
-    edgeCenter,
-    resizeTimeout = -1,
-    ...otherForeignObjectProps
-} : EdgeLabelObjectProps) => {
-    const containerCallback = React.useCallback((containerRef) => {
-        if (containerRef) labelSize(containerRef);
-    }, [edgeCenter]);
+export const EdgeLabelObject = memo(
+    ({ children, edgeCenter, resizeTimeout = -1, ...otherForeignObjectProps }: EdgeLabelObjectProps) => {
+        const containerCallback = React.useCallback(
+            (containerRef) => {
+                if (containerRef) labelSize(containerRef);
+            },
+            [edgeCenter]
+        );
 
-    const labelSize = (container: SVGForeignObjectElement) => {
-        const labelElement = container.getElementsByClassName(`${eccgui}-graphviz__edge-label`);
-        if (labelElement.length > 0) {
-            const width = (labelElement[0] as HTMLElement).offsetWidth;
-            const height = (labelElement[0] as HTMLElement).offsetHeight;
-            container.setAttribute("x", (edgeCenter[0] - width/2).toString());
-            container.setAttribute("y", (edgeCenter[1] - height/2).toString());
-            container.setAttribute("width", width.toString());
-            container.setAttribute("height", height.toString());
-        } else if (resizeTimeout > 0){
-            // Content is not ready yet, recall resizing process after timeout.
-            // This can happen in case the children is actually not a `EdgeLabel`.
-            setTimeout(() => { labelSize(container)}, resizeTimeout);
-        }
-    }
+        const labelSize = (container: SVGForeignObjectElement) => {
+            const labelElement = container.getElementsByClassName(`${eccgui}-graphviz__edge-label`);
+            if (labelElement.length > 0) {
+                const width = (labelElement[0] as HTMLElement).offsetWidth;
+                const height = (labelElement[0] as HTMLElement).offsetHeight;
+                container.setAttribute("x", (edgeCenter[0] - width / 2).toString());
+                container.setAttribute("y", (edgeCenter[1] - height / 2).toString());
+                container.setAttribute("width", width.toString());
+                container.setAttribute("height", height.toString());
+            } else if (resizeTimeout > 0) {
+                // Content is not ready yet, recall resizing process after timeout.
+                // This can happen in case the children is actually not a `EdgeLabel`.
+                setTimeout(() => {
+                    labelSize(container);
+                }, resizeTimeout);
+            }
+        };
 
-    return (
-        <foreignObject
-            ref={containerCallback}
-            className={`${eccgui}-graphviz__edge-labelobject`}
-            width="1"
-            height="1"
-            {...otherForeignObjectProps}
-            requiredExtensions="http://www.w3.org/1999/xhtml"
-        >
-            { children }
-        </foreignObject>
-    )
-});
+        return (
+            <foreignObject
+                ref={containerCallback}
+                className={`${eccgui}-graphviz__edge-labelobject`}
+                width="1"
+                height="1"
+                {...otherForeignObjectProps}
+                requiredExtensions="http://www.w3.org/1999/xhtml"
+            >
+                {children}
+            </foreignObject>
+        );
+    }
+);