@eccenca/gui-elements 22.1.0-rc.0 → 22.1.0-rc.1

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -272,7 +272,8 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
                 // Disable highlighting, since we used empty string search
                 enableHighlighting = false;
                 // Put selected item at the top if it is not in the result list
-                if (!!selectedItem && itemIndexOf(emptyStringResults, selectedItem) === -1) {
+                if (!!selectedItem && itemIndexOf(emptyStringResults, selectedItem) > -1) {
+                    emptyStringResults.splice(itemIndexOf(emptyStringResults, selectedItem), 1)
                     result = [selectedItem, ...emptyStringResults];
                 } else {
                     result = emptyStringResults;
@@ -346,7 +347,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     };
     const updatedPopOverProps: Partial<IPopoverProps> = {
         minimal: true,
-        position: "bottom",
+        position: "bottom-left",
         popoverClassName: `${eccgui}-autocompletefield__options`,
         wrapperTagName: "div",
         boundary: "window",
@@ -385,12 +386,12 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
                 onQueryChange={(q) => setQuery(q)}
                 closeOnSelect={true}
                 query={query}
-                // FIXME: This leads to odd compile errors without "as any"
+                // This leads to odd compile errors without "as any"
                 popoverProps={updatedPopOverProps as any}
                 selectedItem={selectedItem}
                 fill
                 {...createNewItemProps}
-                // FIXME: This leads to odd compile errors without "as any"
+                // This leads to odd compile errors without "as any"
                 inputProps={updatedInputProps as any}
                 itemListRenderer={listLoading ? () => <Menu><MenuItem disabled={true} text={<Spinner position={"inline"} />} style={fieldWidthLimits} /></Menu> : undefined}
             />

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

@@ -116,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/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,11 +2,9 @@ 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>;
 }

package/src/components/Icon/IconButton.tsx

@@ -10,7 +10,7 @@ interface IconButtonProps extends ButtonProps {
     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/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

@@ -1,6 +1,6 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { name } from "react-lorem-ipsum";
+import { loremIpsum } from "react-lorem-ipsum";
 
 import MultiSelectExample from "./MultiSelect";
 
@@ -36,8 +36,16 @@ const Template: ComponentStory<typeof MultiSelectExample> = (args) => <MultiSele
 
 export const Default = Template.bind({});
 
-const items = new Array(5).fill(undefined).map((_) => {
-    const testLabel = name();
+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` };
 });
 
@@ -45,8 +53,8 @@ Default.args = {
     items,
     canCreateNewItem: true,
     prePopulateWithItems: false,
-    equalityProp: "testId",
-    labelProp: "testLabel",
+    itemId: item => item.testId,
+    itemLabel: item => item.testLabel,
     openOnKeyDown: true,
 };
 
@@ -58,6 +66,6 @@ openDropdownWhenFocused.args = {
     items,
     canCreateNewItem: true,
     prePopulateWithItems: false,
-    equalityProp: "testId",
-    labelProp: "testLabel",
+    itemId: item => item.testId,
+    itemLabel: item => item.testLabel,
 };

package/src/components/MultiSelect/MultiSelect.tsx

@@ -1,10 +1,12 @@
 import React from "react";
-import { Intent as BlueprintIntent } from "@blueprintjs/core";
-import { MultiSelect as BlueprintMultiSelect, MultiSelectProps, IItemRendererProps } from "@blueprintjs/select";
+import {Intent as BlueprintIntent} from "@blueprintjs/core";
+import {IItemRendererProps, MultiSelect as BlueprintMultiSelect, MultiSelectProps} from "@blueprintjs/select";
 import MenuItem from "../Menu/MenuItem";
 import Highlighter from "../Typography/Highlighter";
 import Button from "../Button/Button";
 import OverflowText from "../Typography/OverflowText";
+import {HTMLInputProps} from "@blueprintjs/core/src/common/props";
+import {removeExtraSpaces} from "../../common/utils/stringUtils";
 
 interface SelectedParamsType<T> {
     newlySelected: T;
@@ -14,18 +16,14 @@ interface SelectedParamsType<T> {
 
 interface IProps<T> extends Pick<MultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
     /**
-     * field in an item, that differentiates on item from the other.
+     * Returns the unique ID of an item. This will be used for equality of items.
      */
-    equalityProp: string;
+    itemId: (item: T) => string;
     /**
-     * field in the item object that would be used to describe the item.
+     * Returns the label of an item.
      * this would be used in the item selection list as well as the multi-select input
      */
-    labelProp: string;
-    /**
-     * if new items that are not in the original item list can be created and appended
-     */
-    canCreateNewItem?: boolean;
+    itemLabel: (item: T) => string;
     /**
      * When set to true will set the multi-select value with all the items provided
      */
@@ -43,6 +41,9 @@ interface IProps<T> extends Pick<MultiSelectProps<T>, "items" | "placeholder" |
      */
     tagInputProps?: MultiSelectProps<T>["tagInputProps"];
 
+    /** Additional properties for the (query) input field of the multi-selection. */
+    inputProps?: HTMLInputProps;
+
     /**
      * prop to listen for query changes, when text is entered in the multi-select input
      */
@@ -62,6 +63,14 @@ interface IProps<T> extends Pick<MultiSelectProps<T>, "items" | "placeholder" |
      * If omitted, "No results." will be rendered in this case.
      */
     newItemCreationText?: string;
+    /**
+     * Allows to creates new item from a given query. If this is not provided then no new items can be created.
+     */
+    createNewItemFromQuery?: (query: string) => T
+    /**
+     * Items that were newly created and not taken from the list will be post-fixed with this string.
+     */
+    newItemPostfix?: string
     /**
      * The input element is displayed with primary color scheme.
      */
@@ -87,21 +96,23 @@ interface IProps<T> extends Pick<MultiSelectProps<T>, "items" | "placeholder" |
 function MultiSelect<T>({
     items,
     prePopulateWithItems,
-    equalityProp,
-    labelProp,
+    itemId,
+    itemLabel,
     onSelection,
-    canCreateNewItem,
     popoverProps,
     tagInputProps,
+    inputProps,
     runOnQueryChange,
     fullWidth = true,
     noResultText = "No results.",
-    newItemCreationText = "Add new tag",
+    newItemCreationText = "Add new item",
+    newItemPostfix = " (new item)",
     hasStatePrimary,
     hasStateDanger,
     hasStateSuccess,
     hasStateWarning,
     disabled,
+    createNewItemFromQuery,
     ...otherProps
 }: IProps<T>) {
     const [createdItems, setCreatedItems] = React.useState<T[]>([]);
@@ -111,7 +122,7 @@ function MultiSelect<T>({
     const [query, setQuery] = React.useState<string | undefined>(undefined);
     //currently focused element in popover list
     const [focusedItem, setFocusedItem] = React.useState<T | null>(null);
-    const tagInputRef = React.useRef<any>();
+    const inputRef = React.useRef<HTMLInputElement>(null);
 
     let intent;
     switch (true) {
@@ -138,7 +149,7 @@ function MultiSelect<T>({
         setItemsCopy([...items, ...createdItems]);
         setFilteredItemList([...items, ...createdItems]);
         /* eslint-disable react-hooks/exhaustive-deps */
-    }, [items.map((item) => item[equalityProp as keyof T]).join("|")]);
+    }, [items.map((item) => itemId(item)).join("|")]);
 
     React.useEffect(() => {
         onSelection &&
@@ -150,8 +161,8 @@ function MultiSelect<T>({
         /* eslint-disable react-hooks/exhaustive-deps */
     }, [
         onSelection,
-        selectedItems.map((item) => item[equalityProp as keyof T]).join("|"),
-        createdItems.map((item) => item[equalityProp as keyof T]).join("|"),
+        selectedItems.map((item) => itemId(item)).join("|"),
+        createdItems.map((item) => itemId(item)).join("|"),
     ]);
 
     /**
@@ -160,7 +171,7 @@ function MultiSelect<T>({
      * @returns
      */
     const itemHasBeenSelectedAlready = (matcher: string) => {
-        return !!selectedItems.find((item) => String(item[equalityProp as keyof typeof item]).toString() === matcher);
+        return !!selectedItems.find((item) => itemId(item) === matcher);
     };
 
     /**
@@ -168,7 +179,7 @@ function MultiSelect<T>({
      * @param matcher
      */
     const removeItemSelection = (matcher: string) => {
-        setSelectedItems((items) => items.filter((t) => String(t[equalityProp as keyof typeof t]).toString() !== matcher));
+        setSelectedItems((items) => items.filter((item) => itemId(item) !== matcher));
     };
 
     /**
@@ -177,12 +188,12 @@ function MultiSelect<T>({
      * @param item
      */
     const onItemSelect = (item: T) => {
-        if (itemHasBeenSelectedAlready(String(item[equalityProp as keyof T]).toString())) {
-            removeItemSelection(String(item[equalityProp as keyof T]).toString());
+        if (itemHasBeenSelectedAlready(itemId(item))) {
+            removeItemSelection(itemId(item));
         } else {
             setSelectedItems((items) => [...items, item]);
         }
-        setQuery("");
+        inputRef.current?.select()
     };
 
     /**
@@ -192,10 +203,11 @@ function MultiSelect<T>({
     const onQueryChange = async (query: string) => {
         if (query.length) {
             setQuery(query);
+            setFilteredItemList([])
             const resultFromQuery = runOnQueryChange && (await runOnQueryChange(removeExtraSpaces(query)));
             setFilteredItemList(() =>
-                [...(resultFromQuery ?? itemsCopy), ...createdItems].filter((t) =>
-                    String(t[labelProp as keyof typeof t]).toLowerCase().includes(query.toLowerCase())
+                [...(resultFromQuery ?? itemsCopy), ...createdItems].filter(item =>
+                    itemLabel(item).toLowerCase().includes(query.toLowerCase())
                 )
             );
         }
@@ -208,24 +220,22 @@ function MultiSelect<T>({
 
     /**
      * defines how an item in the item list is displayed
-     * @param tag
-     * @param param
-     * @returns
      */
     const onItemRenderer = (item: T, { handleClick, modifiers }: IItemRendererProps) => {
         if (!modifiers.matchesPredicate) {
             return null;
         }
-        const label = createdItems.find((createdItem) => createdItem[labelProp as keyof T] === item[labelProp as keyof T])
-            ? `${item[labelProp as keyof T]} (new tag)`
-            : item[labelProp as keyof T];
+        let label = itemLabel(item)
+        if(createdItems.find(created => itemId(created) === itemId(item))) {
+            label += newItemPostfix
+        }
         return (
             <MenuItem
                 active={modifiers.active}
-                key={String(item[equalityProp as keyof T]).toString()}
-                icon={itemHasBeenSelectedAlready(String(item[equalityProp as keyof T]).toString()) ? "state-checked" : "state-unchecked"}
+                key={itemId(item)}
+                icon={itemHasBeenSelectedAlready(itemId(item)) ? "state-checked" : "state-unchecked"}
                 onClick={handleClick}
-                text={optionRenderer(String(label).toString())}
+                text={optionRenderer(label)}
                 shouldDismissPopover={false}
             />
         );
@@ -246,18 +256,14 @@ function MultiSelect<T>({
      */
     const removeTagFromSelectionViaIndex = (label: string, index: number) => {
         setSelectedItems([...selectedItems.slice(0, index), ...selectedItems.slice(index + 1)]);
-        setCreatedItems((items) => items.filter((t) => String(t[labelProp as keyof typeof t]).toString() !== label));
+        setCreatedItems(items => items.filter(item => itemLabel(item) !== label));
     };
 
-    const removeExtraSpaces = (text: string) => text.replace(/\s+/g, " ").trim();
-
     /**
-     * utility function to create a new Item
-     * @param event
-     * @param label
+     * Utility function to create a new Item. createNewItemFromQuery is assumed to be defined!
      */
-    const createNewItem = (event: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>, label: string): T => {
-        const newItem = { [labelProp]: removeExtraSpaces(label), [equalityProp]: removeExtraSpaces(label) } as any;
+    const createNewItem = (query: string): T => {
+        const newItem = createNewItemFromQuery!!(query);
         //set new items
         setCreatedItems((items) => [...items, newItem]);
         setQuery("");
@@ -270,10 +276,10 @@ function MultiSelect<T>({
      * @param event
      */
     const handleOnKeyUp = (event: React.KeyboardEvent<HTMLElement>) => {
-        if (event.key === "Enter" && !filteredItemList.length && !!query) {
-            createNewItem(event, query);
+        if (event.key === "Enter" && !filteredItemList.length && !!query && createNewItemFromQuery) {
+            createNewItem(query);
         }
-        tagInputRef.current?.focus();
+        inputRef.current?.focus();
     };
 
     /**
@@ -284,8 +290,9 @@ function MultiSelect<T>({
     const handleOnKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
         if (event.key === "Tab" && !!query) {
             event.preventDefault();
-            focusedItem ? onItemSelect(focusedItem) : onItemSelect(createNewItem(event, query));
-            setTimeout(() => tagInputRef.current?.focus());
+            focusedItem ? onItemSelect(focusedItem) : onItemSelect(createNewItem(query));
+            setQuery("");
+            setTimeout(() => inputRef.current?.focus());
         }
     };
 
@@ -297,14 +304,14 @@ function MultiSelect<T>({
      * @returns
      */
     const newItemRenderer = (label: string, active: boolean, handleClick: React.MouseEventHandler<HTMLElement>) => {
-        if (!canCreateNewItem) return undefined;
+        if (!createNewItemFromQuery) return undefined;
         const clickHandler = (e: React.MouseEvent<HTMLElement>) => {
-            createNewItem(e, label);
+            createNewItem(label);
             handleClick(e);
         };
         return (
             <MenuItem
-                id={"new-tag"}
+                id={"new-item"}
                 icon="item-add-artefact"
                 active={active}
                 key={label}
@@ -320,32 +327,28 @@ function MultiSelect<T>({
         ) : undefined;
 
     return (
-        <BlueprintMultiSelect
+        <BlueprintMultiSelect<T>
             {...otherProps}
             query={query}
             onQueryChange={onQueryChange}
             items={filteredItemList}
             onItemSelect={onItemSelect}
             itemRenderer={onItemRenderer}
-            itemsEqual={(a: T, b: T) => a[labelProp as keyof T] === b[labelProp as keyof T]}
+            itemsEqual={(a: T, b: T) => itemId(a) === itemId(b)}
             selectedItems={selectedItems}
             noResults={<MenuItem disabled={true} text={noResultText} />}
-            tagRenderer={(tag) => tag[labelProp as keyof typeof tag]}
+            tagRenderer={item => itemLabel(item)}
             createNewItemRenderer={newItemRenderer}
             onActiveItemChange={(activeItem) => setFocusedItem(activeItem)}
             fill={fullWidth}
-            createNewItemFromQuery={(query) =>
-                ({
-                    [labelProp]: removeExtraSpaces(query),
-                    [equalityProp]: removeExtraSpaces(query),
-                } as any)
-            }
+            createNewItemFromQuery={createNewItemFromQuery}
             tagInputProps={{
                 inputProps: {
                     id: "item",
                     autoComplete: "off",
+                    ...inputProps
                 },
-                inputRef: tagInputRef,
+                inputRef: inputRef,
                 intent,
                 addOnBlur: true,
                 onKeyDown: handleOnKeyDown,