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

package/src/components/Dialog/Modal.tsx

@@ -1,16 +1,17 @@
 import React from "react";
 import {
     Classes as BlueprintClassNames,
-    IOverlayState,
+    IOverlayState as BlueprintOverlayState,
     Overlay as BlueprintOverlay,
-    OverlayProps,
+    OverlayProps as BlueprintOverlayProps,
 } from "@blueprintjs/core";
 
+import { Utilities } from "../../common";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { Card } from "./../Card";
 
-export interface ModalProps extends OverlayProps, IOverlayState {
+export interface ModalProps extends BlueprintOverlayProps, BlueprintOverlayState {
     children: React.ReactNode | React.ReactNode[];
     /**
      * A space-delimited list of class names to pass along to the BlueprintJS `Overlay` element that is used to create the modal.
@@ -33,6 +34,14 @@ export interface ModalProps extends OverlayProps, IOverlayState {
      * This is needed, e.g. when capturing key (down, up) events that should bubble to the modal's parent elements.
      */
     modalFocusable?: boolean;
+    /**
+     * Works only for modals inside portals (`usePortal={true}`).
+     * When set to `true` then the `z-index` of the modal's portal element is recalculated, so that the modal is always shown on top of all other visible elements.
+     * Use this with care!
+     * Usually the normal opening sequence is enough to show the currently most important modal on top.
+     * If this option is used inflationary then this could harm the visibility of other overlays.
+     */
+    forceTopPosition?: boolean;
 }
 
 /**
@@ -51,6 +60,9 @@ export const Modal = ({
     preventBackdrop = false,
     wrapperDivProps,
     modalFocusable = true,
+    usePortal = true,
+    forceTopPosition = false,
+    onOpening,
     ...otherProps
 }: ModalProps) => {
     const backdropProps: React.HTMLProps<HTMLDivElement> | undefined =
@@ -79,6 +91,23 @@ export const Modal = ({
         return child;
     });
 
+    const handlerOnOpening = (modalElement: HTMLElement) => {
+        if (onOpening) {
+            // call the original event handler
+            onOpening(modalElement);
+        }
+        if (usePortal && forceTopPosition) {
+            const parentalPortal = modalElement.closest(`.${BlueprintClassNames.PORTAL}`) as HTMLElement;
+            const highestTopIndex = (Utilities.getGlobalVar("highestModalTopIndex") as unknown as number) ?? 0;
+            if (parentalPortal) {
+                const portalTopIndex = parseInt(getComputedStyle(parentalPortal).zIndex ?? 0, 10);
+                const newTopIndex = Math.max(portalTopIndex, highestTopIndex) + 1;
+                parentalPortal.style.zIndex = `${newTopIndex}`;
+                Utilities.setGlobalVar("highestModalTopIndex", newTopIndex);
+            }
+        }
+    };
+
     return (
         <BlueprintOverlay
             {...otherProps}
@@ -88,6 +117,9 @@ export const Modal = ({
             canOutsideClickClose={canOutsideClickClose}
             canEscapeKeyClose={canEscapeKeyClose}
             hasBackdrop={!preventBackdrop}
+            usePortal={usePortal}
+            onOpening={handlerOnOpening}
+            portalClassName={`${eccgui}-dialog__portal`}
         >
             <div
                 {...wrapperDivProps}

package/src/components/Dialog/dialog.scss

@@ -15,6 +15,10 @@ $eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0
 
 @import "~@blueprintjs/core/src/components/dialog/dialog";
 
+.#{$eccgui}-dialog__portal {
+    z-index: $eccgui-zindex-modals;
+}
+
 .#{$eccgui}-dialog__backdrop {
     background-color: $eccgui-color-modal-backdrop;
 }

package/src/components/Icon/canonicalIconNames.tsx

@@ -14,6 +14,7 @@ export type ValidIconName =
     | "application-vocabularies"
     | "application-warning"
     | "application-hotkeys"
+    | "artefact-chatlog"
     | "artefact-commit"
     | "artefact-customtask"
     | "artefact-dataset"
@@ -44,6 +45,8 @@ export type ValidIconName =
     | "artefact-workflow"
     | "data-sourcepath"
     | "data-targetpath"
+    | "entity-human"
+    | "entity-robot"
     | "item-add-artefact"
     | "item-clone"
     | "item-comment"
@@ -108,6 +111,7 @@ export type ValidIconName =
     | "operation-fix"
     | "operation-link"
     | "operation-logout"
+    | "operation-magic"
     | "operation-merge"
     | "operation-redo"
     | "operation-search"
@@ -165,6 +169,7 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
     "application-warning": icons.WarningAlt,
     "application-hotkeys": icons.Keyboard,
 
+    "artefact-chatlog": icons.Chat,
     "artefact-commit": icons.Commit,
     "artefact-customtask": icons.Script,
     "artefact-dataset-csv": icons.Csv,
@@ -197,6 +202,9 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
     "data-sourcepath": icons.Data_2,
     "data-targetpath": icons.Data_1,
 
+    "entity-human": icons.User,
+    "entity-robot": icons.Bot,
+
     "item-add-artefact": icons.AddAlt,
     "item-clone": icons.Copy,
     "item-comment": icons.AddComment,
@@ -265,6 +273,7 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
     "operation-fix": icons.Tools,
     "operation-link": icons.Link,
     "operation-logout": icons.Logout,
+    "operation-magic": icons.MagicWand,
     "operation-merge": icons.DirectionMerge,
     "operation-redo": icons.Redo,
     "operation-search": icons.Search,

package/src/components/PropertyValuePair/propertyvalue.scss

@@ -6,6 +6,7 @@
 
 .#{$eccgui}-propertyvalue__pair {
     display: block;
+    max-width: 100%;
     clear: both;
 
     &.#{$eccgui}-propertyvalue__pair--hasdivider {

package/src/components/Table/TableExpandHeader.tsx

@@ -3,49 +3,52 @@ import {
     TableExpandHeader as CarbonTableExpandHeader,
     TableExpandHeaderProps as CarbonTableExpandHeaderProps,
 } from "carbon-components-react";
-import IconButton from "./../Icon/IconButton";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestIconProps } from "../Icon";
+import { ValidIconName } from "../Icon/canonicalIconNames";
+
+import IconButton from "./../Icon/IconButton";
 
-export interface TableExpandHeaderProps extends Omit<
-    CarbonTableExpandHeaderProps,
-    "children" | "ariaLabel" | "enableExpando" | "expandIconDescription"
->, React.ThHTMLAttributes<HTMLTableCellElement> {
+export interface TableExpandHeaderProps
+    extends Omit<CarbonTableExpandHeaderProps, "children" | "ariaLabel" | "enableExpando" | "expandIconDescription">,
+        React.ThHTMLAttributes<HTMLTableCellElement> {
     /**
      * This text is displayed as tooltip for the button that toggles the expanded/collapsed state.
      */
     togglerText: string;
-};
+
+    /** An optional icon that is shown as toggle icon. */
+    toggleIcon?: ValidIconName | string[] | React.ReactElement<TestIconProps>;
+}
 
 /**
  * Adds a button to the table header that can trigger a function to expand/collapse all rows of the table.
  */
-export function TableExpandHeader ({
+export function TableExpandHeader({
     togglerText,
     isExpanded,
     onExpand,
     className,
     enableToggle,
+    toggleIcon,
     ...otherCarbonTableExpandHeaderProps
 }: TableExpandHeaderProps) {
-
-    const toggleButton = isExpanded ?
-        React.cloneElement(<IconButton name="toggler-rowcollapse" text={togglerText} />, {onClick: onExpand}) :
-        React.cloneElement(<IconButton name="toggler-rowexpand" text={togglerText} />, {onClick: onExpand});
-
+    const defaultToggleIcon = isExpanded ? "toggler-rowcollapse" : "toggler-rowexpand";
+    const toggleButton = React.cloneElement(<IconButton name={toggleIcon ?? defaultToggleIcon} text={togglerText} />, {
+        onClick: onExpand,
+    });
     return (
         <CarbonTableExpandHeader
-            className={
-                `${eccgui}-simpletable__headexpander` +
-                (!!className ? ` ${className}` : "")
-            }
+            className={`${eccgui}-simpletable__headexpander` + (className ? ` ${className}` : "")}
             isExpanded={isExpanded}
             onExpand={onExpand}
             enableToggle={false}
             {...otherCarbonTableExpandHeaderProps}
         >
-            { enableToggle && toggleButton }
+            {enableToggle && toggleButton}
         </CarbonTableExpandHeader>
-    )
+    );
 }
 
 export default TableExpandHeader;

package/src/configuration/_variables.scss

@@ -17,25 +17,22 @@ $eccgui: "eccgui" !default;
 
 // -- Configuration stack of colors --------------------------------------------
 
-$eccgui-color-primary: rgb(254, 143, 1) !default;
-$eccgui-color-primary-contrast: rgb(255, 255, 255) !default;
-$eccgui-color-accent: rgb(10, 103, 163) !default;
-$eccgui-color-accent-contrast: rgb(255, 255, 255) !default;
-
+$eccgui-color-primary: rgb(254 143 1) !default;
+$eccgui-color-primary-contrast: rgb(255 255 255) !default;
+$eccgui-color-accent: rgb(10 103 163) !default;
+$eccgui-color-accent-contrast: rgb(255 255 255) !default;
 $eccgui-color-success-text: #1b5e20 !default;
-$eccgui-color-success-background: rgb(232, 245, 233) !default;
-$eccgui-color-info-text: rgb(21, 101, 192) !default;
-$eccgui-color-info-background: rgb(227, 242, 253) !default;
+$eccgui-color-success-background: rgb(232 245 233) !default;
+$eccgui-color-info-text: rgb(21 101 192) !default;
+$eccgui-color-info-background: rgb(227 242 253) !default;
 $eccgui-color-warning-text: #e65100 !default;
-$eccgui-color-warning-background: rgb(255, 243, 224) !default;
+$eccgui-color-warning-background: rgb(255 243 224) !default;
 $eccgui-color-danger-text: #b71c1c !default;
-$eccgui-color-danger-background: rgb(255, 235, 238) !default;
-
+$eccgui-color-danger-background: rgb(255 235 238) !default;
 $eccgui-color-applicationheader-text: #222 !default;
 $eccgui-color-applicationheader-background: #ddd !default;
 $eccgui-color-workspace-text: #444 !default;
 $eccgui-color-workspace-background: #f5f5f5 !default;
-
 $eccgui-color-application-text: $eccgui-color-workspace-text !default; // deprecated
 $eccgui-color-application-background: $eccgui-color-workspace-background !default; // deprecated
 
@@ -52,7 +49,10 @@ $eccgui-font-family-fantasy: fantasy !default;
 $eccgui-font-family-default: $eccgui-font-family-sans !default;
 $eccgui-size-typo-base: 14px !default; // size including absolute unit, preferable px
 $eccgui-size-typo-base-lineheight: 1.39 !default; // only ratio to font size, no unit!
-$eccgui-size-type-levelratio: math.div(7, 6) !default; // ratio without unit! used to calculate different text sizes, etc ...
+$eccgui-size-type-levelratio: math.div(
+    7,
+    6
+) !default; // ratio without unit! used to calculate different text sizes, etc ...
 
 $eccgui-font-weight-light: 300 !default;
 $eccgui-font-weight-regular: 400 !default;
@@ -74,6 +74,11 @@ $eccgui-opacity-muted: 0.61 !default;
 $eccgui-opacity-disabled: 0.39 !default;
 $eccgui-opacity-invisible: 0 !default;
 
+// -- Configuration stack of z-indexes -----------------------------------------
+
+$eccgui-zindex-modals: 8001 !default; // higher than carbon ui shell header
+$eccgui-zindex-overlays: 10001 !default; // add delta to dialog portals
+
 // -- Calculation of more config vars ------------------------------------------
 
 /*
@@ -81,52 +86,38 @@ $eccgui-opacity-invisible: 0 !default;
     it is not recommended to do so.
 */
 
-$eccgui-size-typo-caption: math.div(1, $eccgui-size-type-levelratio) *
-    $eccgui-size-typo-base !default;
-$eccgui-size-typo-caption-lineheight: max(
-    $eccgui-size-type-levelratio * $eccgui-size-typo-base-lineheight,
-    1
-) !default;
+$eccgui-size-typo-caption: math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-base !default;
+$eccgui-size-typo-caption-lineheight: max($eccgui-size-type-levelratio * $eccgui-size-typo-base-lineheight, 1) !default;
 $eccgui-size-typo-text: $eccgui-size-typo-base !default; // should be `1rem` but bp3 currently do not support rem units here, leads to errors in their calculations for values of other properties
-$eccgui-size-typo-text-lineheight: max(
-    $eccgui-size-typo-base-lineheight,
-    1
-) !default;
-$eccgui-size-typo-subtitle: $eccgui-size-type-levelratio *
-    $eccgui-size-typo-text !default;
+$eccgui-size-typo-text-lineheight: max($eccgui-size-typo-base-lineheight, 1) !default;
+$eccgui-size-typo-subtitle: $eccgui-size-type-levelratio * $eccgui-size-typo-text !default;
 $eccgui-size-typo-subtitle-lineheight: max(
     math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-text-lineheight,
     1
 ) !default;
-$eccgui-size-typo-title: $eccgui-size-type-levelratio *
-    $eccgui-size-typo-subtitle !default;
+$eccgui-size-typo-title: $eccgui-size-type-levelratio * $eccgui-size-typo-subtitle !default;
 $eccgui-size-typo-title-lineheight: max(
     math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-subtitle-lineheight,
     1
 ) !default;
-$eccgui-size-typo-headline: $eccgui-size-type-levelratio *
-    $eccgui-size-typo-title !default;
+$eccgui-size-typo-headline: $eccgui-size-type-levelratio * $eccgui-size-typo-title !default;
 $eccgui-size-typo-headline-lineheight: max(
     math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-title-lineheight,
     1
 ) !default;
-$eccgui-size-typo-display-1: $eccgui-size-type-levelratio *
-    $eccgui-size-typo-headline !default;
+$eccgui-size-typo-display-1: $eccgui-size-type-levelratio * $eccgui-size-typo-headline !default;
 $eccgui-size-typo-display-1-lineheight: max(
     math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-headline-lineheight,
     1
 ) !default;
-$eccgui-size-typo-display-2: $eccgui-size-type-levelratio *
-    $eccgui-size-typo-display-1 !default;
+$eccgui-size-typo-display-2: $eccgui-size-type-levelratio * $eccgui-size-typo-display-1 !default;
 $eccgui-size-typo-display-2-lineheight: max(
     math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-display-1-lineheight,
     1
 ) !default;
-$eccgui-size-typo-display-3: $eccgui-size-type-levelratio *
-    $eccgui-size-typo-display-2 !default;
+$eccgui-size-typo-display-3: $eccgui-size-type-levelratio * $eccgui-size-typo-display-2 !default;
 $eccgui-size-typo-display-3-lineheight: max(
     math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-display-2-lineheight,
     1
 ) !default;
-
 $eccgui-size-maxwidth-workview: 100 * $eccgui-size-typo-text;

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