@eccenca/gui-elements 22.0.1 → 22.1.0

package/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -7,7 +7,7 @@ import {
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { openInNewTab } from "../../common/utils/openInNewTab";
 
-// TODO: enforce href and remove onClick later
+// FIXME: enforce href and remove onClick later
 export type IBreadcrumbItemProps = Omit<
     IBlueprintBreadcrumbItemProps,
     // we remove some properties that are currently not necessary, required usage should be discussed
@@ -19,14 +19,14 @@ export type IBreadcrumbItemProps = Omit<
 
 function BreadcrumbItem({
     className = "",
-    onClick, 
-    href, 
+    onClick,
+    href,
     //itemDivider='',
     ...otherBlueprintBreadcrumbProps
 }: IBreadcrumbItemProps) {
- 
+
     /*
-        TODO: adding `data-divider` does not work this way because BlueprintJS
+        FIXME: adding `data-divider` does not work this way because BlueprintJS
         breadcrumb component does not support (and forward) it on HTML element
         level. The idea is to add the divider as data-* property to use it via
         CSS/Sass as content for the pseudo element, currently done static in CSS

package/src/components/Breadcrumb/BreadcrumbList.tsx

@@ -18,7 +18,7 @@ type ReducedBreadcrumbsProps = Omit<
     "popoverProps"
 >;
 
-// TODO: enforce onItemClick later
+// FIXME: enforce onItemClick later when href value can always be routed correctly
 interface IBreadcrumbListProps extends ReducedBreadcrumbsProps {
     /**
         list of breadcrumb items to display

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

@@ -19,7 +19,7 @@ export default {
         },
         className: {
             description: "A space-delimited list of class names.",
-            control: "boolean",
+            control: "text",
             table: {
                 defaultValue: { summary: undefined },
                 type: { summary: "string" },

package/src/components/Button/Button.tsx

@@ -9,6 +9,7 @@ import {
 import Icon from "../Icon/Icon";
 import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {ValidIconName} from "../Icon/canonicalIconNames";
 
 export type AnchorOrButtonProps = Omit<BlueprintButtonProps, "elementRef" | "icon" | "rightIcon"> | Omit<BlueprintAnchorButtonProps, "elementRef" | "icon" | "rightIcon">;
 
@@ -56,8 +57,8 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
     * If an URL is set then the button is included as HTML anchor element instead of a button form element.
     */
     href?: string;
-    icon?: string | JSX.Element;
-    rightIcon?: string | JSX.Element;
+    icon?: ValidIconName | JSX.Element;
+    rightIcon?: ValidIconName | JSX.Element;
     target?: string;
 }
 
@@ -115,7 +116,7 @@ function Button({
     </ButtonType>
   );
 
-  return tooltip ? (
+  return (tooltip && !restProps.loading) ? (
     <Tooltip content={tooltip} {...tooltipProperties}>
       <span>{button}</span>
     </Tooltip>

package/src/components/Card/Card.tsx

@@ -7,18 +7,23 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface CardProps extends BlueprintCardProps {
     /**
-     * When set to `true` card is included as simple HTML `div` element.
+     * `<Card />` element is included in DOM as simple `div` element.
      * By default it is a HTML `section`.
      */
     isOnlyLayout?: boolean;
     /**
-     * When set to true, will take the full height of container
+     * Take the full height of container to display the card.
      */
     fullHeight?: boolean;
     /**
-     * when set to true will invert the background color and slightly darken
+     * Background color is slightly altered to differ card display from other cards.
      */
     elevated?: boolean;
+    /**
+     * When card (or its children) get focus the card is scrolled into the viewport.
+     * Property value defined which part of the card is always scrolled in, this may important when the card is larger than the viewport.
+     */
+    scrollinOnFocus?: "start" | "center" | "end";
 }
 
 /**
@@ -32,26 +37,40 @@ function Card({
     isOnlyLayout=false,
     fullHeight=false,
     elevated=false,
+    scrollinOnFocus,
     interactive,
     ...otherProps
 }: CardProps) {
+    const scrollIn = !!scrollinOnFocus ? {
+        tabIndex: 0,
+        onFocus: (e: any) => {
+            const el = e.target.closest(".diapp-iframewindow__content");
+            setTimeout(()=>{if (el) el.scrollIntoView({
+                behavior: "smooth",
+                block: scrollinOnFocus,
+                inline: scrollinOnFocus,
+            })}, 100);
+        }
+    } : {}
     const cardElement = (
         <BlueprintCard
             className={
                 `${eccgui}-card ` +
                 (fullHeight ? ` ${eccgui}-card--fullheight ` : '') +
                 (elevated ? ` ${eccgui}-card--elevated ` : '') +
+                (!!scrollinOnFocus ? ` ${eccgui}-card--scrollonfocus ` : '') +
                 className
             }
             elevation={elevation}
             interactive={!!otherProps.onClick ? true : interactive}
+            {...scrollIn}
             {...otherProps}
         >
             {children}
         </BlueprintCard>
     );
 
-    // TODO: improve Card element so it is itself a section html element
+    // FIXME: improve Card element so it is itself a section html element
     return isOnlyLayout === false ? <section>{cardElement}</section> : cardElement;
 };
 

package/src/components/Card/card.scss

@@ -44,6 +44,10 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     @extend .#{$eccgui}-grid__row--fullheight;
 }
 
+.#{$eccgui}-card--scrollonfocus {
+    outline: none;
+}
+
 .#{$eccgui}-card__header {
     padding: $eccgui-size-card-spacing/2 $eccgui-size-card-spacing/2 $eccgui-size-card-spacing/2 $eccgui-size-card-spacing;
     box-sizing: content-box;

package/src/components/Checkbox/checkbox.scss

@@ -35,6 +35,10 @@ $switch-checked-background-color-disabled: rgba($switch-checked-background-color
             box-shadow: none;
         }
 
+        input:focus ~ .#{$ns}-control-indicator {
+            outline-offset: 0;
+        }
+
         input:disabled ~ .#{$ns}-control-indicator,
         input:disabled:checked ~ .#{$ns}-control-indicator,
         {

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -3,6 +3,12 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import ContextOverlay from "./ContextOverlay";
 import Menu from "../Menu/Menu";
 import IconButton from "../Icon/IconButton";
+import {ValidIconName} from "../Icon/canonicalIconNames";
+
+interface ContextMenuProps {
+    togglerElement?: ValidIconName | JSX.Element
+    [key: string]: any
+}
 
 function ContextMenu({
     children,
@@ -14,13 +20,13 @@ function ContextMenu({
               so by default we use the title attribute instead of Tooltip. */
     tooltipAsTitle = true,
     ...restProps
-}: any) {
+}: ContextMenuProps) {
     return (
         <ContextOverlay {...restProps} className={`${eccgui}-contextmenu ` + className}>
             {typeof togglerElement === "string" ? (
                 <IconButton
                     tooltipAsTitle={tooltipAsTitle}
-                    name={togglerElement}
+                    name={[togglerElement]}
                     text={togglerText}
                     large={togglerLarge}
                     data-test-id={restProps["data-test-id"]}

package/src/components/Dialog/Modal.tsx

@@ -4,10 +4,13 @@
 */
 
 import React from 'react';
-import {Classes as BlueprintClassNames, OverlayProps, Overlay as BlueprintOverlay,} from "@blueprintjs/core";
+import {
+    Classes as BlueprintClassNames,
+    OverlayProps, Overlay as BlueprintOverlay,
+    IOverlayState,
+} from "@blueprintjs/core";
 import {Card} from "./../Card";
 import {CLASSPREFIX as eccgui} from "../../configuration/constants";
-import { IOverlayState } from '@blueprintjs/core';
 
 export interface ModalProps extends OverlayProps, IOverlayState {
   children: React.ReactNode | React.ReactNode[];
@@ -23,6 +26,8 @@ export interface ModalProps extends OverlayProps, IOverlayState {
    * 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>
 }
 
 /**
@@ -38,10 +43,11 @@ function Modal({
     canOutsideClickClose=false,
     canEscapeKeyClose=false,
     preventBackdrop=false,
+    wrapperDivProps,
     ...otherProps
 }: ModalProps) {
 
-    const alteredChildren = React.Children.map(children, (child, index) => {
+    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,
@@ -65,6 +71,7 @@ function Modal({
             hasBackdrop={!preventBackdrop}
         >
             <div
+                {...wrapperDivProps}
                 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"}

package/src/components/Dialog/SimpleDialog.tsx

@@ -47,6 +47,8 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
      * Define purpose of the dialog, e.g. if it is a warning.
      */
     intent?: IntentTypes;
+    /** Optional props for the wrapper div element inside the modal. */
+    wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 }
 
 /**

package/src/components/Form/FieldItem.tsx

@@ -5,10 +5,10 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {TestableComponent} from "../interfaces";
 
 /*
-    TODO:
+    FIXME: Improve development convenience and prevent development errors
 
-    * disabled stae could be automatically forwarded to inserted input element,
-      currently this need to be dome explicitely .
+    * disabled state could be automatically forwarded to inserted input element,
+      currently this need to be dome explicitly .
     * input id could be forwarded to label and input element
     * input id could be created when not given
 */

package/src/components/Form/FieldItemRow.tsx

@@ -2,13 +2,11 @@ import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 /*
-    TODO:
-
-    * allow grow factors for children
+    FIXME: allow grow factors for children
 */
-
+/** Allows to layout field items horizontally. */
 function FieldItemRow({ children, className, ...otherProps }: any) {
-    return <div className={`${eccgui}-fielditem__row` + (className ? " " + className : "")}>{children}</div>;
+    return <div className={`${eccgui}-fielditem__row` + (className ? " " + className : "")} {...otherProps}>{children}</div>;
 }
 
 export default FieldItemRow;

package/src/components/Form/FieldSet.tsx

@@ -59,6 +59,7 @@ function FieldSet({
                 classIntent +
                 (boxed ? ` ${eccgui}-fieldset--boxed` : "")
             }
+            {...otherProps}
         >
             {title && <legend>{title}</legend>}
             {userhelp}

package/src/components/Icon/Icon.tsx

@@ -5,7 +5,7 @@ import { IntentTypes } from "../../common/Intent";
 import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
 import canonicalIcons, {IconSized, ValidIconName} from "./canonicalIconNames"
 
-interface IconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
+export interface IconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
     // The CSS class name.
     className?: string,
     // Canonical icon name
@@ -38,16 +38,16 @@ const findExistingIcon = (iconName: ValidIconName | string[],
 
 /** Returns the first icon name that exists or the fallback icon name. */
 export const findExistingIconName = (iconNames: string[],
-                                     fallbackIconName: string = "Undefined"): string => {
+                                     fallbackIconName: ValidIconName = "Undefined"): ValidIconName => {
     let foundIconName: string = fallbackIconName;
     const iconNameStack = [...iconNames]
     while (foundIconName === fallbackIconName && iconNameStack.length > 0) {
         let iconNameToTest = iconNameStack.shift();
-        if (iconNameToTest && canonicalIcons[iconNameToTest] != null) {
+        if (iconNameToTest && (canonicalIcons as any)[iconNameToTest] != null) {
             foundIconName = iconNameToTest
         }
     }
-    return foundIconName
+    return foundIconName as ValidIconName
 }
 
 function Icon({

package/src/components/Icon/IconButton.tsx

@@ -6,11 +6,11 @@ import {ValidIconName} from "./canonicalIconNames";
 
 interface IconButtonProps extends ButtonProps {
     // Canonical icon name
-    name: ValidIconName
+    name: ValidIconName | string[]
     className?: string
     // Tooltip text
     text?: string,
-    // Time after tooltip text is viible when icon is hovered/focuses
+    // Time after tooltip text is visible when icon is hovered/focuses
     tooltipOpenDelay?: number,
     // Display large icon version
     large?: boolean,
@@ -18,7 +18,7 @@ interface IconButtonProps extends ButtonProps {
     small?: boolean
     // If the tooltip should be set as title attribute instead of the Tooltip component. If true, all other tooltip parameters are ignored.
     tooltipAsTitle?: boolean
-    // If set, button will become an anchor button. FIXME: Setting this parameter should not change the type of the button. Split into several components.
+    // If set, button will become an anchor button. FIXME: CMEM-3742: Setting this parameter should not change the type of the button. Split into several components.
     href?: string
     // Additional description of the icon function to improve accessibility, if not defined then the text label is used as fallback
     description?: string

package/src/components/Icon/canonicalIconNames.tsx

@@ -1,8 +1,7 @@
 import * as icons from "@carbon/icons-react"
 
 /** Valid icon names. */
-export type ValidIconName = string // allow also dynamic string parameter (in intermediate elements that insert Icon elements)
-    | "application-dataintegration"
+export type ValidIconName = "application-dataintegration"
     | "application-homepage"
     | "application-useraccount"
     | "application-warning"
@@ -65,6 +64,11 @@ export type ValidIconName = string // allow also dynamic string parameter (in in
     | "operation-logout"
     | "operation-filter"
     | "operation-filteredit"
+    | "operation-comparison"
+    | "operation-transform"
+    | "operation-aggregation"
+    | "data-sourcepath"
+    | "data-targetpath"
     | "list-sort"
     | "list-sortasc"
     | "list-sortdesc"
@@ -106,6 +110,7 @@ export type ValidIconName = string // allow also dynamic string parameter (in in
     | "linked-item"
     | "operation-auto-graph-layout"
     | "unlinked-item"
+    | "write-protected"
     | "undefined"
     | "Undefined";
 
@@ -433,6 +438,32 @@ const canonicalIconNames: Record<ValidIconName, IconSized> = {
         normal: icons.FilterEdit20,
         large: icons.FilterEdit32
     },
+    "operation-transform": {
+        small: icons.Calculation16,
+        normal: icons.Calculation20,
+        large: icons.Calculation32
+    },
+    "operation-comparison": {
+        small: icons.Compare16,
+        normal: icons.Compare20,
+        large: icons.Compare32
+    },
+    "operation-aggregation": {
+        small: icons.DataCollection16,
+        normal: icons.DataCollection20,
+        large: icons.DataCollection32
+    },
+
+    "data-sourcepath": {
+        small: icons.Data_216,
+        normal: icons.Data_220,
+        large: icons.Data_232
+    },
+    "data-targetpath": {
+        small: icons.Data_116,
+        normal: icons.Data_120,
+        large: icons.Data_132
+    },
 
     "list-sort": {
         small: icons.ArrowsVertical16,
@@ -646,6 +677,12 @@ const canonicalIconNames: Record<ValidIconName, IconSized> = {
         large: icons.ChartNetwork32
     },
 
+    "write-protected": {
+        small: icons.DocumentProtected16,
+        normal: icons.DocumentProtected20,
+        large: icons.DocumentProtected32
+    },
+
     "undefined": {
         small: icons.Undefined16,
         normal: icons.Undefined20,

package/src/components/Iframe/Iframe.tsx

@@ -60,7 +60,7 @@ export const Iframe = React.forwardRef<HTMLIFrameElement, IframeProps>(({
     const classNames = `${eccgui}-iframe` +
         (!!useViewportHeight ? ` ${eccgui}-iframe--${useViewportHeight}height` : "") +
         (!!useAvailableSpace ? ` ${eccgui}-iframe--useavailablespace` : "");
-    const { onLoad = (e: any)=>{}, style, ...otherOriginalIframeProps } = htmlIframeProps;
+    const { onLoad = ()=>{}, style, ...otherOriginalIframeProps } = htmlIframeProps;
     return (
         <div className={classNames}>
             {!isLoaded && <Spinner />}

package/src/components/Menu/MenuItem.tsx

@@ -11,7 +11,7 @@ interface IProps {
     icon?: ValidIconName | string[]
     // Props defined by the Blueprint component that should be forwarded
     internalProps?: Partial<MenuItemProps> & React.AnchorHTMLAttributes<HTMLAnchorElement>
-    // FIXME: For backward compatibility, should be avoided in all code bases
+    // FIXME: CMEM-3742: For backward compatibility, should be avoided in all code bases
     [key: string]: any
 }
 

package/src/components/MultiSelect/MultiSelect.stories.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { loremIpsum } from "react-lorem-ipsum";
+
+import MultiSelectExample from "./MultiSelect";
+
+export default {
+    title: "Components/MultiSelect",
+    component: MultiSelectExample,
+    argTypes: {
+        placeholder: {
+            description: "Input placeholder text",
+            control: "text",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        openOnKeyDown: {
+            description:
+                "If true, the component waits until a keydown event in the TagInput before opening its popover. If false, the popover opens immediately after a mouse click focuses the component's TagInput ",
+            control: "boolean",
+            defaultValue: false,
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        items: {
+            description: "Array of items in the list",
+            control: "none",
+        },
+    },
+} as ComponentMeta<typeof MultiSelectExample>;
+
+const Template: ComponentStory<typeof MultiSelectExample> = (args) => <MultiSelectExample {...args} />;
+
+export const Default = Template.bind({});
+
+const testLabels = loremIpsum({
+    p: 1,
+    avgSentencesPerParagraph: 5,
+    avgWordsPerSentence: 1,
+    startWithLoremIpsum: false,
+    random: false
+}).toString().split(".");
+
+const items = new Array(5).fill(undefined).map((_, id) => {
+    const testLabel = testLabels[id];
+    return { testLabel, testId: `${testLabel}-id` };
+});
+
+Default.args = {
+    items,
+    canCreateNewItem: true,
+    prePopulateWithItems: false,
+    itemId: item => item.testId,
+    itemLabel: item => item.testLabel,
+    openOnKeyDown: true,
+};
+
+const TemplateWithOpenDropdown: ComponentStory<typeof MultiSelectExample> = (args) => <MultiSelectExample {...args} />;
+
+export const openDropdownWhenFocused = TemplateWithOpenDropdown.bind({});
+
+openDropdownWhenFocused.args = {
+    items,
+    canCreateNewItem: true,
+    prePopulateWithItems: false,
+    itemId: item => item.testId,
+    itemLabel: item => item.testLabel,
+};