@eccenca/gui-elements 24.4.1-featurepreparefinalnextcmem6943.2 → 25.0.0-featureimproveprintstylescmem6985.0

package/src/components/Button/Button.stories.tsx

@@ -20,7 +20,7 @@ export default {
         },
         intent: {
             ...helpersArgTypes.exampleIntent,
-            options: ["UNDEFINED", "primary", "success", "warning", "danger"],
+            options: ["UNDEFINED", "primary", "accent", "success", "warning", "danger"],
         },
     },
 } as Meta<typeof Button>;
@@ -62,6 +62,8 @@ const TemplateSemantic: StoryFn<typeof Button> = (args) => (
         <Button {...args} affirmative text="Affirmative action" />
         <Spacing vertical />
         <Button {...args} disruptive text="Disruptive action" />
+        <Spacing vertical />
+        <Button {...args} elevated text="Elevated action" />
     </OverlaysProvider>
 );
 export const ButtonSemantics = TemplateSemantic.bind({});
@@ -74,6 +76,10 @@ const TemplateIntent: StoryFn<typeof Button> = (args) => (
         <Button {...args} text="Warning" intent="warning" />
         <Spacing vertical />
         <Button {...args} text="Danger" intent="danger" />
+        <Spacing vertical />
+        <Button {...args} text="Primary" intent="primary" />
+        <Spacing vertical />
+        <Button {...args} text="Accent" intent="accent" />
     </OverlaysProvider>
 );
 export const ButtonIntent = TemplateIntent.bind({});

package/src/components/Button/Button.tsx

@@ -17,19 +17,23 @@ import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
 interface AdditionalButtonProps {
     /**
      * Always use this when the button triggers an affirmative action, e.g. confirm a process.
-     * The button is displayed with primary color scheme.
+     * The button is displayed with accent color intent.
      */
     affirmative?: boolean;
     /**
      * Always use this when the button triggers an disruptive action, e.g. delete or remove.
-     * The button is displayed with primary color scheme.
+     * The button is displayed with danger color intent.
      */
     disruptive?: boolean;
     /**
      * Use this when a button is important enough to highlight it in a set of other buttons.
-     * The button is displayed with primary color scheme.
+     * The button is displayed with accent color intent.
      */
     elevated?: boolean;
+    /**
+     * Intent state visualized by color.
+     */
+    intent?: BlueprintIntent | "accent";
     /**
      * Content displayed in a badge that is attached to the button.
      * By default it is displayed `{ size: "small", position: "top-right", maxLength: 2 }` and with the same intent state of the button.
@@ -49,18 +53,21 @@ interface AdditionalButtonProps {
      */
     tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
     /**
-     * If an URL is set then the button is included as HTML anchor element instead of a button form element.
+     * Icon displayed on button start.
      */
-    //href?: string;
     icon?: ValidIconName | JSX.Element;
+    /**
+     * Icon displayed on button end.
+     */
     rightIcon?: ValidIconName | JSX.Element;
-    //target?: string;
 }
 
-interface ExtendedButtonProps extends AdditionalButtonProps, Omit<BlueprintButtonProps, "icon" | "rightIcon"> {}
+interface ExtendedButtonProps
+    extends AdditionalButtonProps,
+        Omit<BlueprintButtonProps, "intent" | "icon" | "rightIcon"> {}
 interface ExtendedAnchorButtonProps
     extends AdditionalButtonProps,
-        Omit<BlueprintAnchorButtonProps, "icon" | "rightIcon"> {}
+        Omit<BlueprintAnchorButtonProps, "intent" | "icon" | "rightIcon"> {}
 
 export type ButtonProps = ExtendedButtonProps & ExtendedAnchorButtonProps;
 
@@ -86,7 +93,7 @@ export const Button = ({
     let intentByFunction;
     switch (true) {
         case affirmative || elevated:
-            intentByFunction = BlueprintIntent.PRIMARY;
+            intentByFunction = "accent";
             break;
         case disruptive:
             intentByFunction = BlueprintIntent.DANGER;

package/src/components/Button/button.scss

@@ -1,5 +1,6 @@
 @use "sass:color";
 @use "sass:map";
+@use "sass:list";
 
 $button-height: $pt-button-height;
 $button-border-width: 1px; // !default;
@@ -49,64 +50,125 @@ $dark-button-gradient: $button-gradient; // !default;
 // $button-outlined-border-disabled-intent-opacity: 0.2 !default;
 
 $button-intents: (
-    "primary": (
+    // default - hover - active
+    "primary":
+        (
+            eccgui-color-var("identity", "brand", "900"),
+            eccgui-color-mix(
+                eccgui-color-var("identity", "brand", "900"),
+                eccgui-color-var("identity", "text", "900") 10%
+            ),
+            eccgui-color-mix(
+                eccgui-color-var("identity", "brand", "900"),
+                eccgui-color-var("identity", "text", "900") 20%
+            )
+        ),
+    "accent": (
         eccgui-color-var("identity", "accent", "900"),
-        eccgui-color-var("identity", "accent", "700"),
-        eccgui-color-var("identity", "accent", "500"),
+        eccgui-color-mix(
+            eccgui-color-var("identity", "accent", "900"),
+            eccgui-color-var("identity", "text", "900") 10%
+        ),
+        eccgui-color-mix(eccgui-color-var("identity", "accent", "900"), eccgui-color-var("identity", "text", "900") 20%)
     ),
     "success": (
         eccgui-color-var("semantic", "success", "900"),
-        eccgui-color-var("semantic", "success", "700"),
-        eccgui-color-var("semantic", "success", "500"),
+        eccgui-color-mix(
+            eccgui-color-var("semantic", "success", "900"),
+            eccgui-color-var("identity", "text", "900") 10%
+        ),
+        eccgui-color-mix(
+            eccgui-color-var("semantic", "success", "900"),
+            eccgui-color-var("identity", "text", "900") 20%
+        )
     ),
     "warning": (
         eccgui-color-var("semantic", "warning", "900"),
-        eccgui-color-var("semantic", "warning", "700"),
-        eccgui-color-var("semantic", "warning", "500"),
+        eccgui-color-mix(
+            eccgui-color-var("semantic", "warning", "900"),
+            eccgui-color-var("identity", "text", "900") 10%
+        ),
+        eccgui-color-mix(
+            eccgui-color-var("semantic", "warning", "900"),
+            eccgui-color-var("identity", "text", "900") 20%
+        )
     ),
     "danger": (
         eccgui-color-var("semantic", "danger", "900"),
-        eccgui-color-var("semantic", "danger", "700"),
-        eccgui-color-var("semantic", "danger", "500"),
-    ),
+        eccgui-color-mix(
+            eccgui-color-var("semantic", "danger", "900"),
+            eccgui-color-var("identity", "text", "900") 10%
+        ),
+        eccgui-color-mix(eccgui-color-var("semantic", "danger", "900"), eccgui-color-var("identity", "text", "900") 20%)
+    )
 );
 
 @import "~@blueprintjs/core/src/components/button/button";
 
-.#{$ns}-button {
-    position: relative;
-
-    .#{$ns}-large {
-        min-height: mini-units(6);
-    }
-
-    // special case override: blueprint do not use configured colors here
-    &.#{$ns}-intent-warning {
-        @include pt-button-intent(map.get($button-intents, "warning")...);
+@mixin eccgui-enhance-blueprint-button-intent($intentvalue) {
+    &.#{$ns}-intent-#{$intentvalue} {
+        @include pt-button-intent(map.get($button-intents, $intentvalue)...);
 
         &:not(.#{$ns}-disabled).#{$ns}-icon > svg {
             fill: eccgui-color-rgba($white, 0.7);
         }
 
         &:not(.#{$ns}-disabled):not(.#{$ns}-minimal):not(.#{$ns}-outlined) {
-            @include pt-button-intent(map.get($button-intents, "warning")...);
+            @include pt-button-intent(map.get($button-intents, $intentvalue)...);
         }
 
         &.#{$ns}-minimal,
         &.#{$ns}-outlined {
-            color: $eccgui-color-warning-text;
+            color: list.nth(map.get($button-intents, $intentvalue), 1);
             background: none;
-            border-color: $eccgui-color-warning-text;
+            border-color: list.nth(map.get($button-intents, $intentvalue), 1);
             box-shadow: none;
 
             &:disabled,
             &.#{$ns}-disabled {
-                color: eccgui-color-rgba($eccgui-color-warning-text, 0.39);
+                color: eccgui-color-rgba(list.nth(map.get($button-intents, $intentvalue), 1), $eccgui-opacity-disabled);
+                border-color: eccgui-color-rgba(
+                    list.nth(map.get($button-intents, $intentvalue), 1),
+                    $eccgui-opacity-disabled
+                );
+            }
+
+            &:active:not(:disabled):not(.#{$ns}-disabled),
+            &.#{$ns}-active:not(:disabled):not(.#{$ns}-disabled) {
+                color: list.nth(map.get($button-intents, $intentvalue), 3);
+                background-color: eccgui-color-rgba(
+                    list.nth(map.get($button-intents, $intentvalue), 3),
+                    $eccgui-opacity-ghostly
+                );
+                border-color: list.nth(map.get($button-intents, $intentvalue), 3);
+            }
+
+            &:focus:not(:disabled):not(.#{$ns}-disabled),
+            &:hover:not(:disabled):not(.#{$ns}-disabled) {
+                color: list.nth(map.get($button-intents, $intentvalue), 2);
+                background-color: eccgui-color-rgba(
+                    list.nth(map.get($button-intents, $intentvalue), 2),
+                    0.5 * $eccgui-opacity-ghostly
+                );
+                border-color: list.nth(map.get($button-intents, $intentvalue), 2);
             }
         }
     }
 }
 
+.#{$ns}-button {
+    position: relative;
+
+    .#{$ns}-large {
+        min-height: mini-units(6);
+    }
+
+    // special case override: blueprint do not use configured colors here
+    @include eccgui-enhance-blueprint-button-intent("primary");
+    @include eccgui-enhance-blueprint-button-intent("accent");
+    @include eccgui-enhance-blueprint-button-intent("warning");
+}
+
 .#{$ns}-button-text {
     min-width: 0;
 }

package/src/components/Card/card.scss

@@ -288,3 +288,9 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
         }
     }
 }
+
+@media print {
+    .#{$eccgui}-card__actions {
+        display: none;
+    }
+}

package/src/components/Chat/stories/ChatField.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { ChatField } from "../../../index";
+import { ChatField, ContextMenu, MenuItem } from "../../../index";
 
 export default {
     title: "Components/Chat/ChatField",
@@ -15,4 +15,9 @@ const TemplateFull: StoryFn<typeof ChatField> = (args) => <ChatField {...args} k
 export const Default = TemplateFull.bind({});
 Default.args = {
     onTextSubmit: (value) => alert(value),
+    rightElement: (
+        <ContextMenu>
+            <MenuItem text="Just a test" />
+        </ContextMenu>
+    ),
 };

package/src/components/Checkbox/checkbox.scss

@@ -24,9 +24,15 @@ $control-indicator-spacing: $eccgui-size-inline-whitespace !default;
 // $switch-background-color-active: rgba($gray1, 0.5) !default;
 // $switch-background-color-disabled: $button-background-color-disabled !default;
 $switch-checked-background-color: $eccgui-color-accent !default;
-$switch-checked-background-color-hover: eccgui-color-rgba($switch-checked-background-color, $eccgui-opacity-narrow) !default;
+$switch-checked-background-color-hover: eccgui-color-rgba(
+    $switch-checked-background-color,
+    $eccgui-opacity-narrow
+) !default;
 $switch-checked-background-color-active: $switch-checked-background-color-hover !default;
-$switch-checked-background-color-disabled: eccgui-color-rgba($switch-checked-background-color, $eccgui-opacity-disabled) !default;
+$switch-checked-background-color-disabled: eccgui-color-rgba(
+    $switch-checked-background-color,
+    $eccgui-opacity-disabled
+) !default;
 
 @import "~@blueprintjs/core/src/components/forms/controls"; // Checkbox, Radio, Switch
 
@@ -73,3 +79,9 @@ $switch-checked-background-color-disabled: eccgui-color-rgba($switch-checked-bac
     display: inline-block;
     vertical-align: text-top;
 }
+
+@media print {
+    .#{$ns}-control {
+        print-color-adjust: exact;
+    }
+}

package/src/components/ContentGroup/_contentgroup.scss

@@ -60,3 +60,12 @@ $eccgui-color-scontentgroup-border-sub: eccgui-color-rgba(
     flex-shrink: 1;
     width: 100%;
 }
+
+@media print {
+    .#{$eccgui}-contentgroup__header__options {
+        display: none;
+    }
+    .#{$eccgui}-contentgroup--border-sub::after {
+        print-color-adjust: exact;
+    }
+}

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -66,6 +66,8 @@ export const ContextMenu = ({
               so by default we use the title attribute instead of Tooltip. */
     tooltipAsTitle = true,
     preventPlaceholder = false,
+    "data-test-id": dataTestId,
+    "data-testid": dataTestid,
     ...restProps
 }: ContextMenuProps) => {
     const toggleButton =
@@ -76,7 +78,8 @@ export const ContextMenu = ({
                 text={togglerText}
                 large={togglerLarge}
                 disabled={!!disabled}
-                data-test-id={restProps["data-test-id"]}
+                data-test-id={dataTestId ?? undefined}
+                data-testid={dataTestid ?? undefined}
             />
         ) : (
             (togglerElement as ReactElement)

package/src/components/ContextOverlay/ContextOverlay.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import {
     Classes as BlueprintClasses,
     Popover as BlueprintPopover,
+    PopoverInteractionKind as InteractionKind,
     PopoverProps as BlueprintPopoverProps,
     Utils as BlueprintUtils,
 } from "@blueprintjs/core";
@@ -37,8 +38,11 @@ export const ContextOverlay = ({
     usePlaceholder = false,
     ...otherPopoverProps
 }: ContextOverlayProps) => {
-    const placeholderRef = React.useRef(null);
-    const eventMemory = React.useRef<undefined | "afterhover" | "afterfocus">(undefined);
+    const placeholderRef = React.useRef<HTMLElement>(null);
+    const eventMemory = React.useRef<undefined | "mouseenter" | "focusin" | "click">(undefined);
+    const swapDelay = React.useRef<null | NodeJS.Timeout>(null);
+    const interactionKind = React.useRef<InteractionKind>(otherPopoverProps.interactionKind ?? InteractionKind.CLICK);
+    const swapDelayTime = 15;
     const [placeholder, setPlaceholder] = React.useState<boolean>(
         // use placeholder only for "simple" overlays without special states
         !otherPopoverProps.disabled &&
@@ -48,30 +52,85 @@ export const ContextOverlay = ({
             usePlaceholder
     );
 
+    const swap = (ev: MouseEvent | globalThis.FocusEvent) => {
+        const waitForClick =
+            interactionKind.current === InteractionKind.CLICK ||
+            interactionKind.current === InteractionKind.CLICK_TARGET_ONLY;
+
+        if (swapDelay.current) {
+            clearTimeout(swapDelay.current);
+        }
+
+        const replacePlaceholder = () => {
+            eventMemory.current = ev.type as "mouseenter" | "focusin" | "click";
+            setPlaceholder(false);
+        };
+
+        if (waitForClick) {
+            ev.stopImmediatePropagation();
+            replacePlaceholder();
+            return;
+        }
+
+        swapDelay.current = setTimeout(
+            replacePlaceholder,
+            // we delay the swap for hover/focus to prevent unwanted effects
+            // (e.g. event hickup after replacing elements when it is not really necessary)
+            swapDelayTime
+        );
+    };
+
     React.useEffect(() => {
+        interactionKind.current = otherPopoverProps.interactionKind ?? InteractionKind.CLICK;
+        const waitForClick =
+            interactionKind.current === InteractionKind.CLICK ||
+            interactionKind.current === InteractionKind.CLICK_TARGET_ONLY;
+        const removeEvents = () => {
+            if (placeholderRef.current) {
+                placeholderRef.current.removeEventListener("click", swap);
+                placeholderRef.current.removeEventListener("mouseenter", swap);
+                placeholderRef.current.removeEventListener("focusin", swap);
+            }
+            return;
+        };
         if (placeholderRef.current) {
-            const swap = (ev: MouseEvent | globalThis.FocusEvent) => {
-                eventMemory.current = ev.type === "focusin" ? "afterfocus" : "afterhover";
-                setPlaceholder(false);
-            };
-            (placeholderRef.current as HTMLElement).addEventListener("mouseenter", swap);
-            (placeholderRef.current as HTMLElement).addEventListener("focusin", swap);
+            removeEvents(); // remove events in case of interaction kind changed during existence
+            if (waitForClick) {
+                placeholderRef.current.addEventListener("click", swap);
+            } else {
+                placeholderRef.current.addEventListener("mouseenter", swap);
+                placeholderRef.current.addEventListener("focusin", swap);
+            }
             return () => {
-                if (placeholderRef.current) {
-                    (placeholderRef.current as HTMLElement).removeEventListener("mouseenter", swap);
-                    (placeholderRef.current as HTMLElement).removeEventListener("focusin", swap);
-                }
+                removeEvents();
             };
         }
         return () => {};
-    }, [!!placeholderRef.current]);
+    }, [!!placeholderRef.current, otherPopoverProps.interactionKind]);
 
     const refocus = React.useCallback((node) => {
-        if (eventMemory.current === "afterfocus" && node) {
-            const target = node.targetRef.current.children[0];
-            if (target) {
+        const target = node?.targetRef.current.children[0];
+        if (!eventMemory.current || !target) {
+            return;
+        }
+        switch (eventMemory.current) {
+            case "focusin":
                 target.focus();
-            }
+                break;
+            case "click":
+                target.click();
+                break;
+            case "mouseenter":
+                // re-check if the cursor is still over the element after swapping the placeholder before triggering the event to bubble up
+                (target as HTMLElement).addEventListener(
+                    "mouseover",
+                    () => (target as HTMLElement).dispatchEvent(new MouseEvent("mouseover", { bubbles: true })),
+                    {
+                        capture: true,
+                        once: true,
+                    }
+                );
+                break;
         }
     }, []);
 
@@ -87,7 +146,7 @@ export const ContextOverlay = ({
             PlaceholderElement,
             {
                 ...otherPopoverProps?.targetProps,
-                className: `${BlueprintClasses.POPOVER_TARGET} ${targetClassName}`,
+                className: `${BlueprintClasses.POPOVER_TARGET} ${targetClassName} ${eccgui}-contextoverlay__wrapper--placeholder`,
                 ref: placeholderRef,
             },
             React.cloneElement(childTarget, {

package/src/components/ContextOverlay/tests/ContextMenu.test.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
+import ContextMenu from "./../ContextMenu";
+import { Default as ContextMenuStory } from "./../ContextMenu.stories";
+
+const overlayWrapper = `${eccgui}-contextoverlay`;
+const placeholderClass = `${overlayWrapper}__wrapper--placeholder`;
+
+const checkForPlaceholderClass = (container: HTMLElement, tobe: number) => {
+    expect(container.getElementsByClassName(placeholderClass).length).toBe(tobe);
+};
+
+describe("ContextMenu", () => {
+    it("should render placeholder automatically", () => {
+        const { container } = render(<ContextMenu {...ContextMenuStory.args} />);
+        checkForPlaceholderClass(container, 1);
+    });
+    it("should not render placeholder when `preventPlaceholder===true`", () => {
+        const { container } = render(<ContextMenu {...ContextMenuStory.args} preventPlaceholder={true} />);
+        checkForPlaceholderClass(container, 0);
+    });
+    it("should render placeholder when `preventPlaceholder===false`", () => {
+        const { container } = render(<ContextMenu {...ContextMenuStory.args} preventPlaceholder={false} />);
+        checkForPlaceholderClass(container, 1);
+    });
+    it("if no placeholder is used the menu should be displayed on click", async () => {
+        const { container } = render(<ContextMenu {...ContextMenuStory.args} preventPlaceholder={true} />);
+        checkForPlaceholderClass(container, 0);
+        fireEvent.click(container.getElementsByClassName(overlayWrapper)[0]);
+        expect(await screen.findByText("First option")).toBeVisible();
+    });
+    it("if placeholder is used the menu should be displayed on click", async () => {
+        const { container } = render(<ContextMenu {...ContextMenuStory.args} preventPlaceholder={false} />);
+        checkForPlaceholderClass(container, 1);
+        fireEvent.click(container.getElementsByClassName(overlayWrapper)[0]);
+        expect(await screen.findByText("First option")).toBeVisible();
+    });
+});

package/src/components/ContextOverlay/tests/ContextOverlay.test.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { PopoverInteractionKind } from "@blueprintjs/core";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
+import ContextOverlay from "./../ContextOverlay";
+import { Default as ContextOverlayStory } from "./../ContextOverlay.stories";
+
+const overlayWrapper = `${eccgui}-contextoverlay`;
+const placeholderClass = `${overlayWrapper}__wrapper--placeholder`;
+
+const checkForPlaceholderClass = (container: HTMLElement, tobe: number) => {
+    expect(container.getElementsByClassName(placeholderClass).length).toBe(tobe);
+};
+
+describe("ContextOverlay", () => {
+    it("should not render placeholder automatically", () => {
+        const { container } = render(<ContextOverlay {...ContextOverlayStory.args} />);
+        checkForPlaceholderClass(container, 0);
+    });
+    it("should render placeholder when `usePlaceholder===true`", () => {
+        const { container } = render(<ContextOverlay {...ContextOverlayStory.args} usePlaceholder={true} />);
+        checkForPlaceholderClass(container, 1);
+    });
+    it("should render no placeholder when `usePlaceholder===false`", () => {
+        const { container } = render(<ContextOverlay {...ContextOverlayStory.args} usePlaceholder={false} />);
+        checkForPlaceholderClass(container, 0);
+    });
+    it("if no placeholder is used the overlay should be displayed on click", async () => {
+        const { container } = render(<ContextOverlay {...ContextOverlayStory.args} usePlaceholder={false} />);
+        fireEvent.click(container.getElementsByClassName(overlayWrapper)[0]);
+        expect(await screen.findByText("Overlay:")).toBeVisible();
+    });
+    it("if no placeholder is used the overlay should be displayed on hover (hover interactionKind)", async () => {
+        const { container } = render(
+            <ContextOverlay
+                {...ContextOverlayStory.args}
+                usePlaceholder={false}
+                interactionKind={PopoverInteractionKind.HOVER}
+            />
+        );
+        fireEvent.mouseEnter(container.getElementsByClassName(overlayWrapper)[0]);
+        expect(await screen.findByText("Overlay:")).toBeVisible();
+    });
+    it("if placeholder is used the overlay should be displayed on click", async () => {
+        const { container } = render(<ContextOverlay {...ContextOverlayStory.args} usePlaceholder={true} />);
+        fireEvent.click(container.getElementsByClassName(overlayWrapper)[0]);
+        expect(await screen.findByText("Overlay:")).toBeVisible();
+    });
+    it("if placeholder is used the overlay should be displayed on hover (hover interactionKind)", async () => {
+        const { container } = render(
+            <ContextOverlay
+                {...ContextOverlayStory.args}
+                usePlaceholder={true}
+                interactionKind={PopoverInteractionKind.HOVER}
+            />
+        );
+        checkForPlaceholderClass(container, 1);
+        fireEvent.mouseEnter(container.getElementsByClassName(overlayWrapper)[0]);
+        await waitFor(async () => {
+            expect(screen.queryByDisplayValue("Overlay:")).toBeNull();
+            checkForPlaceholderClass(container, 0);
+            // we need to emulate another mouseover to simulate real user behaviour
+            fireEvent.mouseOver(container.getElementsByClassName(overlayWrapper)[0]);
+            expect(await screen.findByText("Overlay:")).toBeVisible();
+        });
+    });
+});

package/src/components/Depiction/depiction.scss

@@ -220,3 +220,9 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
     position: fixed;
     left: -5000rem;
 }
+
+@media print {
+    .#{$eccgui}-depiction {
+        print-color-adjust: exact;
+    }
+}

package/src/components/Dialog/Modal.tsx

@@ -5,12 +5,13 @@ import {
     Overlay2Props as BlueprintOverlayProps,
 } from "@blueprintjs/core";
 
+import { preventReactFlowActionsClasses } from "../../cmem";
 import { utils } from "../../common";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 
 import { Card } from "./../Card";
-import {preventReactFlowActionsClasses} from "../../cmem";
+import { ModalContext } from "./ModalContext";
 
 export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
     children: React.ReactNode | React.ReactNode[];
@@ -43,9 +44,17 @@ export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
      * If this option is used inflationary then this could harm the visibility of other overlays.
      */
     forceTopPosition?: boolean;
+    /**
+     * Modal ID that should be globally unique. If a ModalContext is provided this can be used to track opening/closing of this modal.
+     */
+    modalId?: string;
+    /**
+     * Prevents that pan and zooming actions of an existing react-flow instance are triggered while this Modal is open.
+     */
+    preventReactFlowEvents?: boolean;
 }
 
-export type ModalSize = "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen"
+export type ModalSize = "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen";
 
 /**
  * Displays contents on top of other elements, used to create dialogs.
@@ -68,8 +77,24 @@ export const Modal = ({
     onOpening,
     "data-test-id": dataTestId,
     "data-testid": dataTestid,
+    modalId,
+    preventReactFlowEvents = true,
     ...otherProps
 }: ModalProps) => {
+    const modalContext = React.useContext(ModalContext)
+    const uniqueModalId = React.useRef<string>(modalId ?? Date.now().toString(36) + Math.random().toString(36).substring(2))
+
+    React.useEffect(() => {
+        return () => {
+            // Make sure to always remove flag when modal is removed
+            modalContext.setModalOpen(uniqueModalId.current, false)
+        }
+    }, [])
+
+    React.useEffect(() => {
+        modalContext.setModalOpen(uniqueModalId.current, otherProps.isOpen)
+    }, [otherProps.isOpen])
+
     const backdropProps: React.HTMLProps<HTMLDivElement> | undefined =
         !canOutsideClickClose && canEscapeKeyClose
             ? {
@@ -117,7 +142,7 @@ export const Modal = ({
         <BlueprintOverlay
             {...otherProps}
             backdropProps={backdropProps}
-            className={`${overlayClassName} ${preventReactFlowActionsClasses}`}
+            className={`${overlayClassName} ${preventReactFlowEvents ? preventReactFlowActionsClasses : ""}`}
             backdropClassName={`${eccgui}-dialog__backdrop`}
             canOutsideClickClose={canOutsideClickClose}
             canEscapeKeyClose={canEscapeKeyClose}