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

package/src/components/Application/_toolbar.scss

@@ -6,29 +6,31 @@
     own rule patches.
 */
 
+@use "sass:color";
+
 /// Header-panel background
-$shell-panel-bg-01: $eccgui-color-applicationheader-background !default;
+$shell-panel-bg-01: $shell-header-bg-01 !default;
 
 /// Panel item hover background
-$shell-panel-bg-02: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%) !default;
+$shell-panel-bg-02: color-mix(in srgb, $shell-header-bg-01, black 10%) !default;
 
 /// Panel item focus and active background
-$shell-panel-bg-03: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-panel-bg-03: color-mix(in srgb, $shell-header-bg-01, black 5%) !default;
 
 /// Panel item link selected background
-$shell-panel-bg-04: adjust-color($eccgui-color-applicationheader-background, $lightness: 5%) !default;
+$shell-panel-bg-04: color-mix(in srgb, $shell-header-bg-01, white 5%) !default;
 
 /// Panel border
-$shell-panel-border: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-panel-border: $shell-panel-bg-03 !default;
 
 /// Header panel text
-$shell-panel-text-01: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%) !default;
+$shell-panel-text-01: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%) !default;
 
 /// Header panel secondary text
 $shell-panel-text-02: $eccgui-color-applicationheader-text !default;
 
 /// Header panel focus border
-$shell-panel-focus: adjust-color($eccgui-color-applicationheader-text, $lightness: 39%) !default;
+$shell-panel-focus: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%) !default;
 
 @import "~@carbon/styles/scss/components/ui-shell/header-panel/index";
 
@@ -36,53 +38,40 @@ $shell-panel-focus: adjust-color($eccgui-color-applicationheader-text, $lightnes
 
 .#{$prefix}--header-panel {
     top: mini-units(8);
+    padding: $eccgui-size-block-whitespace;
+    color: $shell-panel-text-01;
+    background-color: $shell-panel-bg-01;
 }
 
 .#{$prefix}--header-panel--expanded {
-    //width: carbon--mini-units(32);
+    border-right-color: $shell-panel-border;
+    border-left-color: $shell-panel-border;
 }
 
 .#{$eccgui}-application__toolbar__panel-backdrop--onleave,
 .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
     position: fixed;
-    top: mini-units(8);
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: mini-units(8) 0 0 0;
 }
 
 .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
     top: 0;
 }
 
-// tweak original colors
-
-// $shell-panel-bg-01
-.#{$prefix}--header-panel {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
-    padding: $eccgui-size-block-whitespace;
-}
-
-// $shell-panel-text-01
-.#{$prefix}--header-panel {
-    color: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%);
-}
-
-// $shell-panel-border
-.#{$prefix}--header-panel--expanded {
-    border-left-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
-    border-right-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
-}
-
 // add rules for own class identiiers
 
 .#{$eccgui}-application__toolbar {
-    flex-grow: 0;
     flex-basis: auto;
+    flex-grow: 0;
+
+    .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
+        // for some reason the original calculation still moves out the tooltip
+        transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
+    }
 }
 
 .#{$eccgui}-application__toolbar__section {
-    padding: 0 mini-units(1);
     display: flex;
     align-items: center;
+    padding: 0 mini-units(1);
 }

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

@@ -1,37 +1,50 @@
 import React from "react";
 import "@testing-library/jest-dom";
-import {render} from "@testing-library/react";
-import AutoSuggestion, {AutoSuggestionProps} from "../AutoSuggestion"
+import { render } from "@testing-library/react";
+import AutoSuggestion, { AutoSuggestionProps } from "../AutoSuggestion";
 
 describe("AutoSuggestion", () => {
-    let props: AutoSuggestionProps
+    let props: AutoSuggestionProps;
+
+    beforeAll(() => {
+        document.createRange = () => {
+            const range = new Range();
+            range.getBoundingClientRect = jest.fn();
+            range.getClientRects = () => {
+                return {
+                    item: () => null,
+                    length: 0,
+                    [Symbol.iterator]: jest.fn(),
+                };
+            };
+            return range;
+        };
+    });
+
     beforeEach(() => {
         props = {
             label: "test value path",
             initialValue: "",
-            onChange: jest.fn((value) => {
-            }),
+            onChange: jest.fn((value) => {}),
             fetchSuggestions: jest.fn((inputString, cursorPosition) => undefined),
-            checkInput: jest.fn(inputString => ({
-                valid: true
+            checkInput: jest.fn((inputString) => ({
+                valid: true,
             })),
-            onInputChecked: jest.fn(validInput => {
-            }),
+            onInputChecked: jest.fn((validInput) => {}),
             validationErrorText: "",
             clearIconText: "",
-            onFocusChange: jest.fn(hasFocus => {
-            }),
-            id: "test-auto-suggestion"
-        }
-    })
+            onFocusChange: jest.fn((hasFocus) => {}),
+            id: "test-auto-suggestion",
+        };
+    });
 
     it("should render properly", () => {
-        const {container} = render(<AutoSuggestion {...props} />)
-        expect(container).not.toBeEmptyDOMElement()
-    })
+        const { container } = render(<AutoSuggestion {...props} />);
+        expect(container).not.toBeEmptyDOMElement();
+    });
 
     it("should set label prop properly", () => {
-        const {getByText} = render(<AutoSuggestion {...props}/>)
-        expect(getByText(props.label!!)).toBeTruthy()
-    })
-})
+        const { getByText } = render(<AutoSuggestion {...props} />);
+        expect(getByText(props.label!!)).toBeTruthy();
+    });
+});

package/src/components/AutoSuggestion/tests/SingleLineCodeEditor.test.tsx

@@ -1,16 +1,29 @@
 import React from "react";
 import "@testing-library/jest-dom";
 import { render } from "@testing-library/react";
-import {
-    SingleLineCodeEditor,
-    SingleLineCodeEditorProps,
-} from "../../../../index";
+import { SingleLineCodeEditor, SingleLineCodeEditorProps } from "../../../../index";
 import CodeMirror from "codemirror";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 
 describe("SingleLineCodeEditor", () => {
     let props: SingleLineCodeEditorProps,
         codeMirrorEditorInstance: CodeMirror.Editor = null as any;
+
+    beforeAll(() => {
+        document.createRange = () => {
+            const range = new Range();
+            range.getBoundingClientRect = jest.fn();
+            range.getClientRects = () => {
+                return {
+                    item: () => null,
+                    length: 0,
+                    [Symbol.iterator]: jest.fn(),
+                };
+            };
+            return range;
+        };
+    });
+
     beforeEach(() => {
         props = {
             setEditorInstance: jest.fn((editor) => {
@@ -18,7 +31,7 @@ describe("SingleLineCodeEditor", () => {
             }),
             onChange: jest.fn((value) => {}),
             onCursorChange: jest.fn((pos, coords) => {}),
-            mode: null,
+            mode: undefined,
             initialValue: "",
             onFocusChange: jest.fn((focused) => {}),
             onKeyDown: jest.fn((event) => {}),
@@ -49,14 +62,12 @@ describe("SingleLineCodeEditor", () => {
 
     it("should not allow user to create new lines", () => {
         render(<SingleLineCodeEditor {...props} />);
-        codeMirrorEditorInstance
-            .getDoc()
-            .setValue("I'm entering a new line \n character");
+        codeMirrorEditorInstance.getDoc().setValue("I'm entering a new line \n character");
         expect(codeMirrorEditorInstance.lineCount()).toBe(1);
     });
 
     it("should convert multiple lines to a single line", () => {
-        render(<SingleLineCodeEditor {...{...props, initialValue: "1\n2\n3"}} />);
+        render(<SingleLineCodeEditor {...{ ...props, initialValue: "1\n2\n3" }} />);
         expect(codeMirrorEditorInstance.lineCount()).toBe(1);
     });
 });

package/src/components/Dialog/Modal.tsx

@@ -1,57 +1,79 @@
-import React from 'react';
+import React from "react";
 import {
     Classes as BlueprintClassNames,
-    OverlayProps, Overlay as BlueprintOverlay,
     IOverlayState,
+    Overlay as BlueprintOverlay,
+    OverlayProps,
 } from "@blueprintjs/core";
-import {Card} from "./../Card";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { Card } from "./../Card";
 
 export interface ModalProps extends OverlayProps, IOverlayState {
-  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.
-   */
-  overlayClassName?: string;
-  /**
-   * Size of the modal.
-   */
-  size?: "tiny" | "small" | "regular" | "large" | "fullscreen";
-  /**
-   * Prevents that a backdrop area is displayed behind the modal elements.
-   */
-  preventBackdrop?: boolean;
-    /** Optional props for the wrapper div element inside the modal overlay. */
-  wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+    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.
+     */
+    overlayClassName?: string;
+    /**
+     * Size of the modal.
+     */
+    size?: "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen";
+    /**
+     * Prevents that a backdrop area is displayed behind the modal elements.
+     */
+    preventBackdrop?: boolean;
+    /**
+     * Optional props for the wrapper div element inside the modal overlay.
+     */
+    wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Make the modal focusable, e.g. when clicking somewhere on it.
+     * This is needed, e.g. when capturing key (down, up) events that should bubble to the modal's parent elements.
+     */
+    modalFocusable?: boolean;
 }
 
 /**
  * Displays contents on top of other elements, used to create dialogs.
- * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficent.
+ * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficient.
  * Otherwise this element can be used to create own modal elements and edge cases for modal dialogs.
  * Then it is recommended to use the `Card` element inside.
  */
 export const Modal = ({
     children,
-    className='',
-    overlayClassName='',
-    size="regular",
-    canOutsideClickClose=false,
-    canEscapeKeyClose=false,
-    preventBackdrop=false,
+    className = "",
+    overlayClassName = "",
+    size = "regular",
+    canOutsideClickClose = false,
+    canEscapeKeyClose = false,
+    preventBackdrop = false,
     wrapperDivProps,
+    modalFocusable = true,
     ...otherProps
 }: ModalProps) => {
+    const backdropProps: React.HTMLProps<HTMLDivElement> | undefined =
+        !canOutsideClickClose && canEscapeKeyClose
+            ? {
+                  ...otherProps.backdropProps,
+                  // Escape key won't work anymore otherwise after clicking on the backdrop
+                  tabIndex: 0,
+              }
+            : otherProps.backdropProps;
+
+    const focusableProps = modalFocusable
+        ? {
+              tabIndex: 0,
+          }
+        : undefined;
 
     const alteredChildren = React.Children.map(children, (child) => {
-        if ((child as React.ReactElement).type && (child  as React.ReactElement).type === Card) {
-            return React.cloneElement(
-                child as React.ReactElement,
-                {
-                    isOnlyLayout: true,
-                    elevation: 4
-                }
-            );
+        if ((child as React.ReactElement).type && (child as React.ReactElement).type === Card) {
+            return React.cloneElement(child as React.ReactElement, {
+                isOnlyLayout: true,
+                elevation: 4,
+            });
         }
 
         return child;
@@ -60,6 +82,7 @@ export const Modal = ({
     return (
         <BlueprintOverlay
             {...otherProps}
+            backdropProps={backdropProps}
             className={overlayClassName}
             backdropClassName={`${eccgui}-dialog__backdrop`}
             canOutsideClickClose={canOutsideClickClose}
@@ -71,12 +94,14 @@ export const Modal = ({
                 className={BlueprintClassNames.DIALOG_CONTAINER}
                 // this is a workaround because data attribute on SimpleDialog is not correctly routed to the overlay by blueprint js
                 data-test-id={(otherProps as any)["data-test-id"] ?? "simpleDialogWidget"}
+                {...focusableProps}
+                tabIndex={0}
             >
                 <section
                     className={
                         `${eccgui}-dialog__wrapper` +
-                        (typeof size === 'string' ? ` ${eccgui}-dialog__wrapper--` + size : '') +
-                        (className ? ' ' + className : '')
+                        (typeof size === "string" ? ` ${eccgui}-dialog__wrapper--` + size : "") +
+                        (className ? " " + className : "")
                     }
                 >
                     {alteredChildren}
@@ -84,6 +109,6 @@ export const Modal = ({
             </div>
         </BlueprintOverlay>
     );
-}
+};
 
 export default Modal;

package/src/components/Dialog/SimpleDialog.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {BaseSyntheticEvent} from "react";
 
 import { IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -71,10 +71,15 @@ export const SimpleDialog = ({
     const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startInFullScreenMode);
     const showToggler = startInFullScreenMode || showFullScreenToggler;
     const intentClassName = intent ? `${eccgui}-intent--${intent}` : "";
+    const wrapperDivProps = {
+        ...modalPreventEvents,
+        ...otherProps.wrapperDivProps,
+    };
     return (
         <Modal
             enforceFocus={enforceFocus}
             {...otherProps}
+            wrapperDivProps={wrapperDivProps}
             // set default test id if not given
             data-test-id={otherProps["data-test-id"] ?? "simpleDialogWidget"}
             canOutsideClickClose={canOutsideClickClose || !preventSimpleClosing}
@@ -116,4 +121,17 @@ export const SimpleDialog = ({
     );
 };
 
+/** Events that should be prevented to bubble up from a modal that goes beyond the most simple version of a modal, e.g.
+ * allows to drag or supports hot keys etc. */
+export const modalPreventEvents = {
+    // Prevent certain events from leaving the modal, so that e.g. react-flow does not receive these events doing unexpected stuff
+    onContextMenu: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onDrag: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onDragStart: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onDragEnd: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onMouseDown: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onMouseUp: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onClick: (event: BaseSyntheticEvent) => event.stopPropagation()
+};
+
 export default SimpleDialog;

package/src/components/Dialog/dialog.scss

@@ -2,13 +2,15 @@
 
 // our vars
 $eccgui-size-modal-tiny-width: math.div(4, 16) * 100vw !default;
-$eccgui-size-modal-tiny-height:  math.div(1, 9) * 100vh !default;
-$eccgui-size-modal-small-width:  math.div(6, 16) * 100vw !default;
-$eccgui-size-modal-small-height:  math.div(2, 9) * 100vh !default;
-$eccgui-size-modal-regular-width:  math.div(6, 16) * 100vw !default;
-$eccgui-size-modal-regular-height:  math.div(3, 9) * 100vh !default;
-$eccgui-size-modal-large-width:  math.div(8, 16) * 100vw !default;
-$eccgui-size-modal-large-height:  math.div(6, 9) * 100vh !default;
+$eccgui-size-modal-tiny-height: math.div(1, 9) * 100vh !default;
+$eccgui-size-modal-small-width: math.div(5, 16) * 100vw !default;
+$eccgui-size-modal-small-height: math.div(2, 9) * 100vh !default;
+$eccgui-size-modal-regular-width: math.div(6, 16) * 100vw !default;
+$eccgui-size-modal-regular-height: math.div(3, 9) * 100vh !default;
+$eccgui-size-modal-large-width: math.div(9, 16) * 100vw !default;
+$eccgui-size-modal-large-height: math.div(6, 9) * 100vh !default;
+$eccgui-size-modal-xlarge-width: math.div(12, 16) * 100vw !default;
+$eccgui-size-modal-xlarge-height: math.div(7, 9) * 100vh !default;
 $eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0.69) !default;
 
 @import "~@blueprintjs/core/src/components/dialog/dialog";
@@ -18,15 +20,15 @@ $eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0
 }
 
 .#{$eccgui}-dialog__wrapper {
-    margin: 2rem;
+    display: flex;
+    align-content: stretch;
+    align-items: stretch;
+    justify-content: center;
     max-width: calc(100vw - 4rem);
     max-height: calc(100vh - 4rem);
+    margin: 2rem;
     pointer-events: all;
     user-select: text;
-    display: flex;
-    justify-content: center;
-    align-items: stretch;
-    align-content: stretch;
 
     & > * {
         flex-grow: 1;
@@ -34,9 +36,14 @@ $eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0
         max-width: 100%;
     }
 
-    & * {
+    * {
         pointer-events: all;
     }
+
+    .#{$prefix}--popover {
+        // workaround to fix the arrows in pagination when used in modal
+        pointer-events: none;
+    }
 }
 
 .#{$eccgui}-dialog__wrapper--tiny {
@@ -59,14 +66,19 @@ $eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0
     min-height: $eccgui-size-modal-large-height;
 }
 
+.#{$eccgui}-dialog__wrapper--xlarge {
+    width: $eccgui-size-modal-xlarge-width;
+    min-height: $eccgui-size-modal-xlarge-height;
+}
+
 .#{$eccgui}-dialog__wrapper--fullscreen {
-    margin: 0;
-    padding: $eccgui-size-block-whitespace;
     box-sizing: border-box;
-    height: 100vh;
     width: 100vw;
-    max-height: 100vh;
     max-width: 100vw;
+    height: 100vh;
+    max-height: 100vh;
+    padding: $eccgui-size-block-whitespace;
+    margin: 0;
 }
 
 .#{$eccgui}-dialog__notifications {

package/src/components/Icon/IconButton.tsx

@@ -48,7 +48,7 @@ export const IconButton = ({
 }: IconButtonProps) => {
     const defaultIconTooltipProps = {
         hoverOpenDelay: 1000,
-        openOnTargetFocus: restProps.disabled || (restProps.tabIndex ?? "0") < 0 ? false : undefined,
+        openOnTargetFocus: restProps.disabled || (restProps.tabIndex ?? 0) < 0 ? false : undefined,
     };
     const iconProps = {
         small: restProps.small,

package/src/components/Icon/canonicalIconNames.tsx

@@ -13,6 +13,7 @@ export type ValidIconName =
     | "application-useraccount"
     | "application-vocabularies"
     | "application-warning"
+    | "application-hotkeys"
     | "artefact-commit"
     | "artefact-customtask"
     | "artefact-dataset"
@@ -162,6 +163,7 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
     "application-useraccount": icons.UserAvatar,
     "application-vocabularies": icons.Catalog,
     "application-warning": icons.WarningAlt,
+    "application-hotkeys": icons.Keyboard,
 
     "artefact-commit": icons.Commit,
     "artefact-customtask": icons.Script,

package/src/components/OverviewItem/OverviewItemDepiction.tsx

@@ -11,7 +11,7 @@ export interface OverviewItemDepictionProps extends React.HTMLAttributes<HTMLDiv
 
 export const OverviewItemDepiction = ({
     children,
-    className = '',
+    className = "",
     keepColors = false,
     ...restProps
 }: OverviewItemDepictionProps) => {
@@ -20,19 +20,11 @@ export const OverviewItemDepiction = ({
         border: false,
         backgroundColor: keepColors ? undefined : "dark",
         ratio: "1:1" as "1:1",
-        padding: "medium" as "medium"
-    }
+        padding: "medium" as "medium",
+    };
     // only return Depiction element if it is wrapped inside OverviewItemDepiction
-    if (
-        typeof children === "object" &&
-        !!children &&
-        "type" in children &&
-        children.type === Depiction
-    ) {
-        return React.cloneElement(
-            children,
-            defaultDepictionDisplay
-        );
+    if (typeof children === "object" && !!children && "type" in children && children.type === Depiction) {
+        return React.cloneElement(children, defaultDepictionDisplay);
     }
     // use Depiction element for basic icons
     if (
@@ -41,7 +33,7 @@ export const OverviewItemDepiction = ({
         "type" in children &&
         (children.type === Icon || children.type === TestIcon)
     ) {
-        return <Depiction image={children} {...defaultDepictionDisplay} />
+        return <Depiction image={children as JSX.Element} {...defaultDepictionDisplay} />;
     }
     return (
         <div
@@ -54,7 +46,7 @@ export const OverviewItemDepiction = ({
         >
             {children}
         </div>
-    )
-}
+    );
+};
 
 export default OverviewItemDepiction;

package/src/components/PropertyValuePair/PropertyName.tsx

@@ -1,16 +1,21 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import Label from "../Label/Label";
+import Label, { LabelProps } from "../Label/Label";
 
 export interface PropertyNameProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Increase or decrease the width used for the property name.
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Additional label properties, e.g. `tooltip`.
+     * It is only used if the `PropertyName` has simple text input.
+     */
+    labelProps?: LabelProps;
 }
 
-export const PropertyName = ({ className = "", size, children, ...otherProps }: PropertyNameProps) => {
+export const PropertyName = ({ className = "", size, children, labelProps, ...otherDtProps }: PropertyNameProps) => {
     return (
         <dt
             className={
@@ -18,9 +23,15 @@ export const PropertyName = ({ className = "", size, children, ...otherProps }:
                 (size ? ` ${eccgui}-propertyvalue__property--${size}` : "") +
                 (className ? " " + className : "")
             }
-            {...otherProps}
+            {...otherDtProps}
         >
-            <div>{typeof children === "string" ? <Label text={children} isLayoutForElement="span" /> : children}</div>
+            <div>
+                {typeof children === "string" ? (
+                    <Label text={children} isLayoutForElement="span" {...labelProps} />
+                ) : (
+                    children
+                )}
+            </div>
         </dt>
     );
 };