@eccenca/gui-elements 24.1.0-rc.2 → 24.1.0-rc.4

package/src/cmem/react-flow/configuration/_colors-workflow.scss

@@ -1,3 +1,4 @@
+$reactflow-color-project-node: #A5356E !default; // Cannot be part of a workflow but we have no other place atm to configure it
 $reactflow-color-dataset-node: #3a7896 !default;
 $reactflow-color-linking-node: #0097a7 !default;
 $reactflow-color-transform-node: #40a691 !default;
@@ -10,12 +11,14 @@ $reactflow-color-replaceable-input: #faa854 !default;
 }
 
 .#{eccgui}-configuration--colors__react-flow-workflow {
+    --projectNode: #{$reactflow-color-project-node};
     --datasetNode: #{$reactflow-color-dataset-node};
     --linkingNode: #{$reactflow-color-linking-node};
     --transformNode: #{$reactflow-color-transform-node};
     --taskNode: #{$reactflow-color-task-node};
     --workflowNode: #{$reactflow-color-workflow-node};
     --replaceableInput: #{$reactflow-color-replaceable-input};
+    --projectNodeBright: #{bright($reactflow-color-project-node)};
     --datasetNodeBright: #{bright($reactflow-color-dataset-node)};
     --linkingNodeBright: #{bright($reactflow-color-linking-node)};
     --transformNodeBright: #{bright($reactflow-color-transform-node)};

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -219,6 +219,8 @@ const AutoSuggestion = ({
         CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
     >(undefined);
     const [cm, setCM] = React.useState<EditorView>();
+    const currentCm = React.useRef<EditorView>()
+    currentCm.current = cm
     const isFocused = React.useRef(false);
     const autoSuggestionDivRef = React.useRef<HTMLDivElement>(null);
     /** Mutable editor state, since this needs to be current in scope of the SingleLineEditorComponent. */
@@ -235,12 +237,12 @@ const AutoSuggestion = ({
     const pathIsValid = validationResponse?.valid ?? true;
 
     React.useEffect(() => {
-        if (reInitOnInitialValueChange && initialValue != null && cm) {
+        if (reInitOnInitialValueChange && initialValue != null && currentCm.current) {
             dispatch({
-                changes: { from: 0, to: cm?.state?.doc.length, insert: initialValue },
+                changes: { from: 0, to: currentCm.current.state?.doc.length, insert: initialValue },
             });
         }
-    }, [initialValue, cm, reInitOnInitialValueChange]);
+    }, [initialValue, reInitOnInitialValueChange]);
 
     const setCurrentIndex = (newIndex: number) => {
         editorState.index = newIndex;

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -301,13 +301,15 @@ function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps<T, UPD
             let enableHighlighting = true;
             if (onlySelectItemReturned) {
                 // If the auto-completion only returns no suggestion or the selected item itself, query with empty string.
-                const emptyStringResults = await onSearch("");
+                const emptyStringResults: T[] = await onSearch("");
                 // Disable highlighting, since we used empty string search
                 enableHighlighting = false;
                 // Put selected item at the top if it is not in the result list
                 if (!!selectedItem && itemIndexOf(emptyStringResults, selectedItem) > -1) {
-                    emptyStringResults.splice(itemIndexOf(emptyStringResults, selectedItem), 1);
-                    result = [selectedItem, ...emptyStringResults];
+                    // Do not mutate original array
+                    const withoutSelected = [...emptyStringResults]
+                    withoutSelected.splice(itemIndexOf(emptyStringResults, selectedItem), 1);
+                    result = [selectedItem, ...withoutSelected];
                 } else {
                     result = emptyStringResults;
                 }

package/src/components/Card/CardActions.tsx

@@ -8,6 +8,10 @@ export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
      * Mainly used for cards used as modals (dialogs).
      */
     inverseDirection?: boolean;
+    /**
+     * Set footer to display its children on only one line.
+     */
+    noWrap?: boolean;
 }
 
 /**
@@ -18,6 +22,7 @@ export const CardActions = ({
     children,
     className = "",
     inverseDirection = false,
+    noWrap = false,
     ...otherProps
 }: CardActionsProps) => {
     return (
@@ -26,6 +31,7 @@ export const CardActions = ({
             className={
                 `${eccgui}-card__actions` +
                 (inverseDirection ? ` ${eccgui}-card__actions--inversedirection` : "") +
+                (noWrap ? ` ${eccgui}-card__actions--nowrap` : "") +
                 (className ? " " + className : "")
             }
         >

package/src/components/Card/CardContent.tsx

@@ -15,10 +15,16 @@ export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
  * Holds the card content.
  * Display scrollbars in case there is not enough space for it.
  */
-export const CardContent = ({ children, className = "", noFlexHeight, ...otherProps }: CardContentProps) => {
+export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(({
+    children,
+    className='',
+    noFlexHeight,
+    ...otherProps
+}: CardContentProps, ref) => {
     return (
         <div
             {...otherProps}
+            ref={ref}
             className={
                 `${eccgui}-card__content` +
                 (noFlexHeight ? ` ${eccgui}-card__content--noflexheight` : "") +
@@ -28,6 +34,4 @@ export const CardContent = ({ children, className = "", noFlexHeight, ...otherPr
             {children}
         </div>
     );
-};
-
-export default CardContent;
+});

package/src/components/Card/card.scss

@@ -236,6 +236,10 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     flex-direction: row-reverse;
 }
 
+.#{$eccgui}-card__actions--nowrap {
+    flex-wrap: nowrap;
+}
+
 .#{$eccgui}-card__actions__aux {
     display: flex;
     flex-flow: row wrap;
@@ -272,4 +276,15 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     .#{$eccgui}-card__actions--inversedirection > & {
         justify-content: flex-start;
     }
+
+    .#{$eccgui}-card__actions--nowrap > & {
+        flex-shrink: 5;
+        flex-wrap: nowrap;
+        min-width: 0;
+
+        & > * {
+            flex-shrink: 10;
+            min-width: 0;
+        }
+    }
 }

package/src/components/Dialog/SimpleDialog.tsx

@@ -5,7 +5,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import IconButton from "../Icon/IconButton";
 import { TestableComponent } from "../interfaces";
 
-import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle } from "./../Card";
+import { Card, CardActions, CardActionsProps, CardContent, CardHeader, CardOptions, CardTitle } from "./../Card";
 import Divider from "./../Separation/Divider";
 import Modal, { ModalProps } from "./Modal";
 
@@ -45,6 +45,8 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
     showFullScreenToggler?: boolean;
     /** Starts the modal in full screen mode. The show full screen toggler will be automatically enabled. */
     startInFullScreenMode?: boolean;
+    /** Forward properties to the actions footer component. */
+    actionsProps?: Omit<CardActionsProps, "inverseDirection">;
 }
 
 /**
@@ -66,6 +68,7 @@ export const SimpleDialog = ({
     showFullScreenToggler = false,
     startInFullScreenMode = false,
     size,
+    actionsProps,
     ...otherProps
 }: SimpleDialogProps) => {
     const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startInFullScreenMode);
@@ -112,7 +115,11 @@ export const SimpleDialog = ({
                     <CardContent className={`${eccgui}-dialog__notifications`}>{notifications}</CardContent>
                 )}
                 {actions && (
-                    <CardActions inverseDirection className={intentClassName}>
+                    <CardActions
+                        {...actionsProps}
+                        inverseDirection
+                        className={`${actionsProps?.className ?? ""} ${intentClassName}`}
+                    >
                         {actions}
                     </CardActions>
                 )}

package/src/components/Icon/canonicalIconNames.tsx

@@ -19,6 +19,7 @@ const canonicalIcons = {
     "artefact-commit": icons.Commit,
     "artefact-task-deleteprojectfiles": icons.TrashCan,
     "artefact-task-downloadfile": icons.CloudDownload,
+    "artefact-task-concatenatetofile": icons.DocumentExport,
     "artefact-dataset-csv": icons.Csv,
     "artefact-dataset-eccencadataplatform": icons.DataVis_1,
     "artefact-dataset-excel": icons.Xls,
@@ -65,6 +66,7 @@ const canonicalIcons = {
     "item-download": icons.Download,
     "item-draggable": icons.Draggable,
     "item-edit": icons.Edit,
+    "item-magic-edit": icons.MagicWand,
     "item-evaluation": icons.Analytics,
     "item-execution": icons.Run,
     "item-info": icons.Information,

package/src/components/Label/Label.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Label } from "../../index";
+import { Icon, Label } from "../../index";
 
 export default {
     title: "Forms/Label",
@@ -19,4 +19,5 @@ Default.args = {
     tooltip: loremIpsum({ p: 1, avgSentencesPerParagraph: 2, startWithLoremIpsum: false, random: false }).toString(),
     disabled: false,
     htmlFor: "inputid",
+    additionalElements: <Icon name={"state-warning"} tooltipText={"message"} small />,
 };

package/src/components/Label/Label.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Icon from "../Icon/Icon";
+import Spacing from "../Separation/Spacing";
 import Tooltip, { TooltipProps } from "../Tooltip/Tooltip";
 
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
@@ -34,6 +35,12 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
      * visual appearance of the label
      */
     emphasis?: "strong" | "normal";
+    /**
+     * Add other elements to the end of the label content
+     */
+    additionalElements?: React.ReactNode | React.ReactNode[];
+    /** Force label to get displayed as inline block element. */
+    inline?: boolean;
 }
 
 export const Label = ({
@@ -46,6 +53,8 @@ export const Label = ({
     tooltipProps,
     isLayoutForElement = "label",
     emphasis = "normal",
+    additionalElements,
+    inline,
     ...otherLabelProps
 }: LabelProps) => {
     let htmlElementstring = isLayoutForElement;
@@ -63,16 +72,23 @@ export const Label = ({
                 </span>
             )}
             {children && <span className={`${eccgui}-label__other`}>{children}</span>}
+            {additionalElements && (
+                <>
+                    <Spacing vertical size="tiny" />
+                    {additionalElements}
+                </>
+            )}
         </>
     );
 
-    return !!text || !!info || !!tooltip || !!children ? (
+    return !!text || !!info || !!tooltip || !!children || !!additionalElements ? (
         React.createElement(
             htmlElementstring,
             {
                 className:
                     `${eccgui}-label ${eccgui}-label--${emphasis}` +
                     (className ? " " + className : "") +
+                    (inline ? ` ${eccgui}-label--inline` : "") +
                     (disabled ? ` ${eccgui}-label--disabled` : ""),
                 ...otherLabelProps,
             },

package/src/components/Label/label.scss

@@ -8,7 +8,6 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
     font-size: $eccgui-size-typo-label;
     line-height: $eccgui-size-typo-label-lineheight;
     color: $eccgui-color-label-text;
-    vertical-align: middle;
 
     .#{$eccgui}-typography__overflowtext--passdown > & {
         display: flex;
@@ -17,6 +16,11 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
     }
 }
 
+.#{$eccgui}-label--inline {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 .#{$eccgui}-label--disabled {
     opacity: $eccgui-opacity-disabled;
 }

package/src/components/Menu/MenuItem.tsx

@@ -5,6 +5,7 @@ import { openInNewTab } from "../../common/utils/openInNewTab";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ValidIconName } from "../Icon/canonicalIconNames";
 import Icon from "../Icon/Icon";
+import Tooltip from "../Tooltip/Tooltip";
 
 import { TestIconProps } from "./../Icon/TestIcon";
 
@@ -15,16 +16,41 @@ export interface MenuItemProps
      * If set the icon is diplayed on the left side of the menu item.
      */
     icon?: ValidIconName | string[] | React.ReactElement<TestIconProps>;
+    /**
+     * Submenu.
+     */
     children?: React.ReactNode;
+    /**
+     * Tooltip, but only added to the label, not to the full menu item.
+     */
+    tooltip?: string | JSX.Element;
 }
 
 /**
  * Single item, used as child inside `Menu`.
  */
-export const MenuItem = ({ children, className = "", icon, onClick, href, ...restProps }: MenuItemProps) => {
+export const MenuItem = ({
+    children,
+    className = "",
+    icon,
+    onClick,
+    href,
+    text,
+    tooltip,
+    ...restProps
+}: MenuItemProps) => {
     return (
         <BlueprintMenuItem
             {...restProps}
+            text={
+                tooltip ? (
+                    <Tooltip content={tooltip} fill>
+                        {text}
+                    </Tooltip>
+                ) : (
+                    text
+                )
+            }
             href={href}
             onClick={(e: React.MouseEvent<HTMLElement>) =>
                 openInNewTab(e as React.MouseEvent<HTMLAnchorElement>, onClick, href)

package/src/components/Menu/menu.scss

@@ -48,6 +48,7 @@ $menu-background-color: transparent !default;
 @import "~@blueprintjs/core/src/components/menu/menu";
 
 .#{$ns}-menu {
+    min-width: auto;
     padding: 0;
 
     .#{$ns}-popover2-content > & {

package/src/components/OverviewItem/overviewitem.scss

@@ -193,7 +193,10 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
     .#{$eccgui}-overviewitem__item:hover &,
     .#{$eccgui}-overviewitem__item:focus &,
-    .#{$eccgui}-overviewitem__item:active & {
+    .#{$eccgui}-overviewitem__item:active &,
+    &:focus-within,
+    &:has(.#{$ns}-active),
+    &:has(.#{$ns}-popover-open) {
         display: flex;
     }
 }

package/src/components/Switch/Switch.tsx

@@ -1,26 +1,45 @@
-import React, { memo, SyntheticEvent } from "react";
-import { Switch as BlueprintSwitch, SwitchProps as BlueprintSwitchProps } from "@blueprintjs/core";
+import React, { memo } from "react";
+import {
+    Classes as BlueprintClasses,
+    Switch as BlueprintSwitch,
+    SwitchProps as BlueprintSwitchProps,
+} from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Label } from "../Label/Label";
 
 export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
     /**
      * Event handler for changed state.
      */
-    onChange?: (value: boolean) => any;
+    onChange?: (value: boolean) => void;
     /**
      * class names
      */
     className?: string;
 }
 
-export const Switch = ({ onChange, className, ...otherProps }: SwitchProps) => {
-    const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
-        const checked = !!(e as any).target?.checked;
-        onChange && onChange(checked);
+export const Switch = ({ onChange, className, label, ...otherProps }: SwitchProps) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (onChange) {
+            onChange(!!e.target?.checked);
+        }
     };
 
-    return <BlueprintSwitch className={`${eccgui}-switch ${className}`} {...otherProps} onChange={handleChange} />;
+    return (
+        <BlueprintSwitch
+            className={`${eccgui}-switch ${className ?? ""} ${
+                label && !otherProps.labelElement ? BlueprintClasses.INLINE : ""
+            }`}
+            labelElement={
+                label ? (
+                    <Label text={label} isLayoutForElement="span" disabled={otherProps.disabled} inline />
+                ) : undefined
+            }
+            {...otherProps}
+            onChange={handleChange}
+        />
+    );
 };
 
 export default memo(Switch);

package/src/components/Tag/TagList.tsx

@@ -10,11 +10,11 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
     const tagList = (
         <ul className={`${eccgui}-tag__list` + (className && !label ? " " + className : "")} {...otherProps}>
             {React.Children.map(children, (child, i) => {
-                return (
+                return child ? (
                     <li className={`${eccgui}-tag__list-item`} key={"tagitem_" + i}>
                         {child}
                     </li>
-                );
+                ) : null;
             })}
         </ul>
     );

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo, useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { foldKeymap } from "@codemirror/language";
-import { lintGutter } from "@codemirror/lint";
 import { EditorState, Extension } from "@codemirror/state";
 import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
 import { minimalSetup } from "codemirror";
@@ -29,6 +28,7 @@ import {
     adaptedHighlightSpecialChars,
     adaptedLineNumbers,
     adaptedPlaceholder,
+    adaptedLintGutter,
 } from "./tests/codemirrorTestHelper";
 import { ExtensionCreator } from "./types";
 
@@ -212,7 +212,7 @@ export const CodeEditor = ({
             return [];
         }
 
-        const values = [lintGutter()];
+        const values = [adaptedLintGutter()];
 
         const linters = ModeLinterMap.get(mode);
         if (linters) {
@@ -320,24 +320,26 @@ export const CodeEditor = ({
             parent: parent.current,
         });
 
-        if (height) {
-            view.dom.style.height = typeof height === "string" ? height : `${height}px`;
-        }
+        if (view?.dom) {
+            if (height) {
+                view.dom.style.height = typeof height === "string" ? height : `${height}px`;
+            }
 
-        if (disabled) {
-            view.dom.className += ` ${eccgui}-disabled`;
-        }
+            if (disabled) {
+                view.dom.className += ` ${eccgui}-disabled`;
+            }
 
-        if (intent) {
-            view.dom.className += ` ${eccgui}-intent--${intent}`;
-        }
+            if (intent) {
+                view.dom.className += ` ${eccgui}-intent--${intent}`;
+            }
 
-        if (autoFocus) {
-            view.focus();
-        }
+            if (autoFocus) {
+                view.focus();
+            }
 
-        if (setEditorView) {
-            setEditorView(view);
+            if (setEditorView) {
+                setEditorView(view);
+            }
         }
 
         return () => {

package/src/extensions/codemirror/tests/codemirrorTestHelper.ts

@@ -10,6 +10,7 @@
 import { EditorView, placeholder, highlightSpecialChars, lineNumbers, highlightActiveLine } from "@codemirror/view";
 import { syntaxHighlighting, foldGutter, codeFolding } from "@codemirror/language";
 import { Extension } from "@codemirror/state";
+import { lintGutter } from "@codemirror/lint";
 
 /** placeholder extension, current error '_view.placeholder is not a function' */
 export const adaptedPlaceholder = (text?: string) =>
@@ -55,3 +56,6 @@ export const adaptedFoldGutter = (props?: any) =>
 
 export const adaptedCodeFolding = (props?: any) =>
     typeof codeFolding === "function" ? codeFolding(props) : emptyExtension;
+
+export const adaptedLintGutter = (props?: any) =>
+    typeof lintGutter === "function" ? lintGutter(props) : emptyExtension;

package/src/extensions/react-flow/_config.scss

@@ -15,3 +15,4 @@ $reactflow-edge-stroke-color-selected: $eccgui-color-accent !default;
 $reactflow-transition-time: 0.25s !default;
 $reactflow-transition-function: "" !default;
 $reactflow-transition-anglestart: -90deg;
+$reactflow-cursor-delimiter-offset: 0.9 * $eccgui-size-block-whitespace;