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

package/src/components/Breadcrumb/breadcrumb.scss

@@ -11,23 +11,23 @@
     }
 
     & > li::after {
-        background: none;
-        margin: 0;
-        height: auto;
-        width: auto;
         display: inline-block;
-        vertical-align: middle;
-        content: "/";
+        flex-shrink: 0;
+        width: auto;
         width: $eccgui-size-block-whitespace;
+        height: auto;
+        margin: 0;
         text-align: center;
-        flex-shrink: 0;
+        vertical-align: middle;
+        content: "/";
+        background: none;
     }
 
     .#{$ns}-breadcrumbs-collapsed {
         padding: 0;
         margin: 0;
 
-        &:before  {
+        &::before {
             width: $eccgui-size-block-whitespace * 2;
             height: $eccgui-size-block-whitespace;
             background-image: url("~@carbon/icons/svg/32/overflow-menu--horizontal.svg");
@@ -49,30 +49,32 @@
     }
 
     .#{$eccgui}-breadcrumb__item > * {
-        text-overflow: ellipsis;
+        display: inline;
         overflow: hidden;
+        text-overflow: ellipsis;
         vertical-align: middle;
-        display: inline;
     }
 }
 
 .#{$eccgui}-breadcrumb__item {
-    font-size: inherit;
+    display: inline-block;
     overflow: hidden;
+    font-size: inherit;
     text-overflow: ellipsis;
-    display: inline-block;
+
+    a {
+        @extend .#{$eccgui}-breadcrumb__item;
+        @extend .#{$ns}-breadcrumb;
+    }
 }
 
 a.#{$eccgui}-breadcrumb__item {
     &:not(.#{$ns}-breadcrumb-current):not(.#{$ns}-disabled) {
         text-decoration: underline;
+
         &:hover,
         &:focus {
             text-decoration: none;
         }
     }
-    a {
-        @extend .#{$eccgui}-breadcrumb__item;
-        @extend .#{$ns}-breadcrumb;
-    }
 }

package/src/components/Breadcrumb/stories/BreadcrumbList.stories.tsx

@@ -1,27 +1,30 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { BreadcrumbList, BreadcrumbItem } from './../../../index';
+import { Meta, StoryFn } from "@storybook/react";
+
+import { BreadcrumbItem, BreadcrumbList } from "./../../../index";
 
 export default {
     title: "Components/Breadcrumbs/List",
     component: BreadcrumbList,
     subcomponents: { BreadcrumbItem },
-    argTypes: {
-    },
-}  as ComponentMeta<typeof BreadcrumbList>
+    argTypes: {},
+} as Meta<typeof BreadcrumbList>;
 
-const Template: ComponentStory<typeof BreadcrumbList> = (args) => (
-    <BreadcrumbList  {...args} />
-);
+const Template: StoryFn<typeof BreadcrumbList> = (args) => <BreadcrumbList {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    items : [
-        {text: "Root page", href : "#" },
-        {text: "Main click category", onClick: () => alert("Breadcrumb click")},
-        {text: <div>Sub category item</div>, href: "#"},
-        {text: <span>Disabled breadcrumb with a very long title</span>, disabled: true},
-        {text: <a href="#wrong">Wrongly placed link inside link</a>},
-        {text: "Current breadcrumb item", current: true}
+    onItemClick: undefined,
+    items: [
+        { text: "Non-click root page" },
+        { text: "Main click category", onClick: () => alert("Breadcrumb click") },
+        { text: <div>Sub category item</div>, href: "#" },
+        {
+            text: <span>Disabled breadcrumb with a very long title</span>,
+            disabled: true,
+            onClick: () => alert("Test click (should not be triggered)"),
+        },
+        { text: <a href="#wrong">Wrongly placed link inside link</a> },
+        { text: "Current breadcrumb item", current: true, href: "#" },
     ],
 };

package/src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { CodeAutocompleteField, CodeAutocompleteFieldProps } from "../../../index";
+import { IPartialAutoCompleteResult } from "../AutoSuggestion/AutoSuggestion";
+
+export default {
+    title: "Forms/CodeAutocompleteField",
+    component: CodeAutocompleteField,
+    argTypes: {},
+} as Meta<typeof CodeAutocompleteField>;
+
+const Template: StoryFn<typeof CodeAutocompleteField> = (args) => (
+    <CodeAutocompleteField {...args}></CodeAutocompleteField>
+);
+
+const resultList = ["find me", "item", "auto-completion result"];
+
+const defaultProps: CodeAutocompleteFieldProps = {
+    initialValue: "",
+    fetchSuggestions(
+        inputString: string,
+        cursorPosition: number
+    ): IPartialAutoCompleteResult | undefined | Promise<IPartialAutoCompleteResult | undefined> {
+        const stringBeforeCursor = inputString.substring(0, cursorPosition);
+        const lastSpaceIdx = stringBeforeCursor.lastIndexOf(" ");
+        const searchWordStart = lastSpaceIdx >= 0 ? lastSpaceIdx + 1 : 0;
+        const lastWordBeforeCursor = stringBeforeCursor
+            .substring(searchWordStart, stringBeforeCursor.length)
+            .toLowerCase()
+            .trim();
+        const replacements = resultList.filter((item) => item.toLowerCase().includes(lastWordBeforeCursor));
+        if (replacements.length) {
+            return {
+                cursorPosition: cursorPosition,
+                inputString: inputString,
+                replacementResults: [
+                    {
+                        extractedQuery: lastWordBeforeCursor,
+                        replacementInterval: {
+                            from: searchWordStart,
+                            length: lastWordBeforeCursor.length,
+                        },
+                        replacements: replacements.map((v) => ({
+                            label: `Label of '${v}'`,
+                            description: `Description of '${v}'`,
+                            value: v,
+                        })),
+                    },
+                ],
+            };
+        }
+    },
+    placeholder:
+        "The word before the cursor will be auto-completed. At the beginning or after a space, all results are shown.",
+    onChange(): any {
+        // Do nothing
+    },
+};
+
+/** Offers basic auto-completion for the word right before the cursor. */
+export const Default = Template.bind({});
+
+Default.args = defaultProps;
+
+/** Shows validation error if the input string contains the word 'not'. */
+export const WithValidation = Template.bind({});
+
+WithValidation.args = {
+    ...defaultProps,
+    initialValue: "Contains not",
+    checkInput: (inputString) => {
+        const notIndex = inputString.indexOf("not");
+        if (notIndex >= 0) {
+            return {
+                valid: false,
+                parseError: {
+                    message: "Strings containing the sub-string 'not' are NOT allowed.",
+                    start: notIndex,
+                    end: notIndex + 3,
+                },
+            };
+        } else {
+            return {
+                valid: true,
+            };
+        }
+    },
+};

package/src/components/CodeAutocompleteField/CodeAutocompleteField.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { AutoSuggestion, AutoSuggestionProps } from "../AutoSuggestion/AutoSuggestion";
+
+export type CodeAutocompleteFieldProps = AutoSuggestionProps;
+
+/**
+ * Input component that allows partial, fine-grained auto-completion, i.e. of sub-strings of the input string.
+ * This is comparable to a one line code editor.
+ *
+ * Example usage: input of a path string offering auto-completion for each single part of the path.
+ */
+export function CodeAutocompleteField({ className, ...otherProps }: CodeAutocompleteFieldProps) {
+    // Currently this works only as an alias element for `MultiSelect`.
+    return (
+        <AutoSuggestion
+            className={`${eccgui}-codeautocompletefield` + (className ? ` ${className}` : "")}
+            {...otherProps}
+        />
+    );
+}

package/src/components/CodeAutocompleteField/index.ts

@@ -0,0 +1 @@
+export * from "./CodeAutocompleteField";

package/src/components/ContextOverlay/contextoverlay.scss

@@ -5,13 +5,21 @@ $pt-dark-popover2-background-color: $dark-gray4 !default;
 
 @import "~@blueprintjs/popover2/src/popover2";
 
-.#{$ns}-popover2-content {
+.#{$ns}-overlay-content,
+.#{$ns}-popover2,
+.#{$ns}-popover2-content,
+.#{$ns}-popover2-target {
     max-width: 100%;
 }
 
+.#{$ns}-popover2-content {
+    .#{$ns}-input-group {
+        display: block;
+    }
+}
+
 .#{$ns}-popover2-target {
     cursor: pointer;
-    max-width: 100%;
 }
 
 .#{$ns}-submenu.#{$ns}-popover > .#{$ns}-popover-content {

package/src/components/Depiction/Depiction.tsx

@@ -1,18 +1,22 @@
-import React, {useCallback, useEffect, useRef} from "react";
+import React, { useCallback, useEffect, useRef } from "react";
+import SVG from "react-inlinesvg";
 import Color from "color";
-import SVG from 'react-inlinesvg';
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { BadgeProps } from "../Badge/Badge";
 import { IconProps } from "../Icon/Icon";
 import { TestIconProps } from "../Icon/TestIcon";
 import Tooltip, { TooltipProps } from "../Tooltip/Tooltip";
+
 import decideContrastColorValue from "./../../common/utils/colorDecideContrastvalue";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 
 export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Image that should be used as depiction.
      */
-    image: React.ReactElement<IconProps | TestIconProps | React.ImgHTMLAttributes<HTMLImageElement> | React.SVGProps<SVGSVGElement>>;
+    image: React.ReactElement<
+        IconProps | TestIconProps | React.ImgHTMLAttributes<HTMLImageElement> | React.SVGProps<SVGSVGElement>
+    >;
     /**
      * In case you use an SVG encoded as a data URL in the `<img />` element, then it is transformed to a inline SVG inside the DOM tree.
      * Should be work with Base64 and URL encoded data URIs.
@@ -67,7 +71,7 @@ export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Attach a `<Badge />` element to the depiction.
      */
-    badge?: React.ReactElement<BadgeProps>,
+    badge?: React.ReactElement<BadgeProps>;
 }
 
 /**
@@ -77,11 +81,11 @@ export function Depiction({
     className = "",
     image,
     forceInlineSvg = false,
-    size="medium",
-    resizing="cover",
-    ratio="source",
+    size = "medium",
+    resizing = "cover",
+    ratio = "source",
     caption,
-    captionPosition="none",
+    captionPosition = "none",
     backgroundColor,
     border,
     rounded,
@@ -92,37 +96,43 @@ export function Depiction({
 }: DepictionProps) {
     const containerRef = useRef<HTMLDivElement>(null);
 
-    let styleDepictionColors = {};
+    let styleDepictionColors = Object.create(null);
     if (!!backgroundColor && backgroundColor !== "light" && backgroundColor !== "dark") {
         try {
             const color = Color(backgroundColor);
             styleDepictionColors = {
                 [`--${eccgui}-depiction-background`]: color.rgb().toString(),
-                [`--${eccgui}-depiction-color`]: decideContrastColorValue({testColor: color})
-            }
-        } catch(ex) {
-            console.warn("Received invalid background color for depiction: " + backgroundColor)
+                [`--${eccgui}-depiction-color`]: decideContrastColorValue({ testColor: color }),
+            };
+        } catch (ex) {
+            console.warn("Received invalid background color for depiction: " + backgroundColor);
         }
     }
 
-    const updateSvgResizing = React.useCallback((el: SVGElement) => {
-        let preserveAspectRatio = "";
-        switch (resizing) {
-            case "cover":
-                preserveAspectRatio = "xMidYMid slice";
-                break;
-            case "stretch":
-                preserveAspectRatio = "none";
-                break;
-        }
-        el.setAttribute("preserveAspectRatio", preserveAspectRatio);
-    }, [resizing])
+    const updateSvgResizing = React.useCallback(
+        (el: SVGElement) => {
+            let preserveAspectRatio = "";
+            switch (resizing) {
+                case "cover":
+                    preserveAspectRatio = "xMidYMid slice";
+                    break;
+                case "stretch":
+                    preserveAspectRatio = "none";
+                    break;
+            }
+            el.setAttribute("preserveAspectRatio", preserveAspectRatio);
+        },
+        [resizing]
+    );
 
-    const inlineSvgCall = useCallback((svgElement: SVGElement) => {
-        if(svgElement) {
-            updateSvgResizing(svgElement)
-        }
-    }, [updateSvgResizing]);
+    const inlineSvgCall = useCallback(
+        (svgElement: SVGElement) => {
+            if (svgElement) {
+                updateSvgResizing(svgElement);
+            }
+        },
+        [updateSvgResizing]
+    );
 
     useEffect(() => {
         // Resize element after every render
@@ -130,7 +140,7 @@ export function Depiction({
         if (svgElement.length > 0) {
             updateSvgResizing(svgElement[0]);
         }
-    })
+    });
 
     let depiction = image;
     if (
@@ -141,13 +151,10 @@ export function Depiction({
         image.props.src.startsWith("data:image/svg+xml")
     ) {
         depiction = (
-            <SVG
-                src={image.props.src}
-                innerRef={inlineSvgCall}
-            >
+            <SVG src={image.props.src} innerRef={inlineSvgCall}>
                 {image}
             </SVG>
-        )
+        );
     }
 
     const depictionContainer = (
@@ -158,11 +165,13 @@ export function Depiction({
                 ` ${eccgui}-depiction__image--${size}` +
                 ` ${eccgui}-depiction__image--${resizing}-sizing` +
                 ` ${eccgui}-depiction__image--ratio-${ratio.replace(":", "to")}` +
-                (backgroundColor === "light" || backgroundColor === "dark" ? ` ${eccgui}-depiction__image--color-${backgroundColor}` : '') +
-                (!!backgroundColor ? ` ${eccgui}-depiction__image--color-config` : '') +
-                (border ? ` ${eccgui}-depiction__image--hasborder` : '') +
-                (rounded ? ` ${eccgui}-depiction__image--roundedborder` : '') +
-                (padding && padding !== "none" ? ` ${eccgui}-depiction__image--padding-${padding}` : '')
+                (backgroundColor === "light" || backgroundColor === "dark"
+                    ? ` ${eccgui}-depiction__image--color-${backgroundColor}`
+                    : "") +
+                (backgroundColor ? ` ${eccgui}-depiction__image--color-config` : "") +
+                (border ? ` ${eccgui}-depiction__image--hasborder` : "") +
+                (rounded ? ` ${eccgui}-depiction__image--roundedborder` : "") +
+                (padding && padding !== "none" ? ` ${eccgui}-depiction__image--padding-${padding}` : "")
             }
             style={styleDepictionColors as React.CSSProperties}
         >
@@ -171,24 +180,17 @@ export function Depiction({
     );
 
     return (
-        <figure
-            className={
-                `${eccgui}-depiction` +
-                (className ? ` ${className}` : '')
-            }
-            {...otherFigureProps}
-        >
-            { captionPosition === "tooltip" && !!caption ? (
-                <Tooltip content={caption} size="medium" {...tooltipProps}>{depictionContainer}</Tooltip>
+        <figure className={`${eccgui}-depiction` + (className ? ` ${className}` : "")} {...otherFigureProps}>
+            {captionPosition === "tooltip" && !!caption ? (
+                <Tooltip content={caption} size="medium" {...tooltipProps}>
+                    {depictionContainer}
+                </Tooltip>
             ) : (
                 depictionContainer
             )}
             {!!caption && (
                 <figcaption
-                    className={
-                        `${eccgui}-depiction__caption` +
-                        ` ${eccgui}-depiction__caption--${captionPosition}`
-                    }
+                    className={`${eccgui}-depiction__caption` + ` ${eccgui}-depiction__caption--${captionPosition}`}
                 >
                     {caption}
                 </figcaption>

package/src/components/Dialog/SimpleDialog.tsx

@@ -1,18 +1,13 @@
 import React from "react";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import { IntentTypes } from "../../common/Intent";
-import {
-    Card,
-    CardActions,
-    CardContent,
-    CardHeader,
-    CardOptions,
-    CardTitle,
-} from "./../Card";
+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 Divider from "./../Separation/Divider";
 import Modal, { ModalProps } from "./Modal";
-import {TestableComponent} from "../interfaces";
-import IconButton from "../Icon/IconButton";
 
 export interface SimpleDialogProps extends ModalProps, TestableComponent {
     /**
@@ -45,11 +40,11 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
      */
     intent?: IntentTypes;
     /** Optional props for the wrapper div element inside the modal. */
-    wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+    wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
     /** If a full screen toggler is shown that will allow to switch to full screen mode. */
-    showFullScreenToggler?: boolean
+    showFullScreenToggler?: boolean;
     /** Starts the modal in full screen mode. The show full screen toggler will be automatically enabled. */
-    startInFullScreenMode?: boolean
+    startInFullScreenMode?: boolean;
 }
 
 /**
@@ -65,6 +60,7 @@ export const SimpleDialog = ({
     notifications = null,
     hasBorder = false,
     preventSimpleClosing = false,
+    enforceFocus = false,
     intent,
     headerOptions,
     showFullScreenToggler = false,
@@ -73,10 +69,11 @@ export const SimpleDialog = ({
     ...otherProps
 }: SimpleDialogProps) => {
     const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startInFullScreenMode);
-    const showToggler = startInFullScreenMode || showFullScreenToggler
+    const showToggler = startInFullScreenMode || showFullScreenToggler;
     const intentClassName = intent ? `${eccgui}-intent--${intent}` : "";
     return (
         <Modal
+            enforceFocus={enforceFocus}
             {...otherProps}
             // set default test id if not given
             data-test-id={otherProps["data-test-id"] ?? "simpleDialogWidget"}
@@ -84,18 +81,13 @@ export const SimpleDialog = ({
             canEscapeKeyClose={canEscapeKeyClose || !preventSimpleClosing}
             size={displayFullscreen ? "fullscreen" : size}
         >
-            <Card className={intentClassName}
-            >
-                {(title || headerOptions || showToggler) ? (
+            <Card className={intentClassName}>
+                {title || headerOptions || showToggler ? (
                     <CardHeader>
-                        <CardTitle
-                            className={intentClassName}
-                        >
-                            {title}
-                        </CardTitle>
-                        {(headerOptions || showToggler) ? (
+                        <CardTitle className={intentClassName}>{title}</CardTitle>
+                        {headerOptions || showToggler ? (
                             <CardOptions>
-                                { headerOptions }
+                                {headerOptions}
                                 {showToggler && (
                                     <IconButton
                                         name={displayFullscreen ? "toggler-minimize" : "toggler-maximize"}
@@ -112,21 +104,16 @@ export const SimpleDialog = ({
                 <CardContent>{children}</CardContent>
                 {hasBorder && <Divider />}
                 {!!notifications && (
-                    <CardContent className={`${eccgui}-dialog__notifications`}>
-                        {notifications}
-                    </CardContent>
+                    <CardContent className={`${eccgui}-dialog__notifications`}>{notifications}</CardContent>
                 )}
                 {actions && (
-                    <CardActions
-                        inverseDirection
-                        className={intentClassName}
-                    >
+                    <CardActions inverseDirection className={intentClassName}>
                         {actions}
                     </CardActions>
                 )}
             </Card>
         </Modal>
     );
-}
+};
 
 export default SimpleDialog;

package/src/components/Icon/IconButton.tsx

@@ -1,9 +1,11 @@
 import React from "react";
-import Button, { ButtonProps, AnchorOrButtonProps } from "../Button/Button";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import Button, { AnchorOrButtonProps, ButtonProps } from "../Button/Button";
+
+import { ValidIconName } from "./canonicalIconNames";
 import Icon from "./Icon";
 import { TestIconProps } from "./TestIcon";
-import {ValidIconName} from "./canonicalIconNames";
 
 interface ExtendedButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
     /**
@@ -41,30 +43,42 @@ export const IconButton = ({
     tooltipProps,
     description,
     tooltipAsTitle = false,
-    minimal=true,
+    minimal = true,
     ...restProps
 }: IconButtonProps) => {
+    const defaultIconTooltipProps = {
+        hoverOpenDelay: 1000,
+        openOnTargetFocus: restProps.disabled || (restProps.tabIndex ?? "0") < 0 ? false : undefined,
+    };
     const iconProps = {
         small: restProps.small,
         large: restProps.large,
         tooltipText: tooltipAsTitle ? undefined : text,
-        tooltipProps: !!tooltipProps ? {hoverOpenDelay: 1000, ...tooltipProps} : {hoverOpenDelay: 1000},
+        tooltipProps: tooltipProps
+            ? {
+                  ...defaultIconTooltipProps,
+                  ...tooltipProps,
+              }
+            : defaultIconTooltipProps,
         description: description ? description : text,
     };
 
     return (
         <Button
+            tabIndex={text && !tooltipAsTitle ? -1 : undefined}
             title={tooltipAsTitle && text ? text : undefined}
             {...restProps}
-            icon={(typeof name === "string" || Array.isArray(name)) ? (
-                <Icon name={name} {...iconProps} />
-            ) : (
-                React.cloneElement(name, iconProps)
-            )}
+            icon={
+                typeof name === "string" || Array.isArray(name) ? (
+                    <Icon name={name} {...iconProps} />
+                ) : (
+                    React.cloneElement(name, iconProps)
+                )
+            }
             className={`${eccgui}-button--icon ` + className}
             minimal={minimal}
         />
     );
-}
+};
 
 export default IconButton;

package/src/components/Icon/canonicalIconNames.tsx

@@ -103,6 +103,8 @@ export type ValidIconName =
     | "operation-erase"
     | "operation-filter"
     | "operation-filteredit"
+    | "operation-filterremove"
+    | "operation-fix"
     | "operation-link"
     | "operation-logout"
     | "operation-merge"
@@ -256,7 +258,9 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
     "operation-comparison": icons.Compare,
     "operation-erase": icons.Erase,
     "operation-filteredit": icons.FilterEdit,
+    "operation-filterremove": icons.FilterRemove,
     "operation-filter": icons.Filter,
+    "operation-fix": icons.Tools,
     "operation-link": icons.Link,
     "operation-logout": icons.Logout,
     "operation-merge": icons.DirectionMerge,