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

package/src/components/MultiSelect/MultiSelect.tsx

@@ -1,23 +1,15 @@
-import React, {useRef} from "react";
-import {
-    Intent as BlueprintIntent,
-    HTMLInputProps as BlueprintHTMLInputProps
-} from "@blueprintjs/core";
+import React, { useRef } from "react";
+import { HTMLInputProps as BlueprintHTMLInputProps, Intent as BlueprintIntent } from "@blueprintjs/core";
 import {
     ItemRendererProps as BlueprintItemRendererProps,
     MultiSelect2 as BlueprintMultiSelect,
-    MultiSelect2Props as BlueprintMultiSelectProps
+    MultiSelect2Props as BlueprintMultiSelectProps,
 } from "@blueprintjs/select";
-import {
-    MenuItem,
-    Highlighter,
-    Button,
-    OverflowText,
-    ContextOverlayProps,
-    Spinner,
-} from "./../../index";
 
-import {removeExtraSpaces} from "../../common/utils/stringUtils";
+import { removeExtraSpaces } from "../../common/utils/stringUtils";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { ContextOverlayProps, Highlighter, IconButton, MenuItem, OverflowText, Spinner } from "./../../index";
 
 export interface MultiSelectSelectionProps<T> {
     newlySelected: T;
@@ -28,7 +20,12 @@ export interface MultiSelectSelectionProps<T> {
 // @deprecated use `MultiSelectSelectionProps<T>`
 export type SelectedParamsType<T> = MultiSelectSelectionProps<T>;
 
-export interface MultiSelectProps<T> extends Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
+export interface MultiSelectProps<T>
+    extends Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
+    /**
+     * Additional class name, space separated.
+     */
+    className?: string;
     /**
      * Returns the unique ID of an item. This will be used for equality of items.
      */
@@ -80,11 +77,11 @@ export interface MultiSelectProps<T> extends Pick<BlueprintMultiSelectProps<T>,
     /**
      * 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
+    createNewItemFromQuery?: (query: string) => T;
     /**
      * Items that were newly created and not taken from the list will be post-fixed with this string.
      */
-    newItemPostfix?: string
+    newItemPostfix?: string;
     /**
      * The input element is displayed with primary color scheme.
      */
@@ -106,10 +103,25 @@ export interface MultiSelectProps<T> extends Pick<BlueprintMultiSelectProps<T>,
      */
     disabled?: boolean;
 
-    /** Delay in ms how long the request for the given query should be delayed. */
-    requestDelay?: number
+    /**
+     * Delay in ms how long the request for the given query should be delayed.
+     */
+    requestDelay?: number;
+
+    /**
+     * Clear query when an option is selected or unselected.
+     * The query is empty then and the user need to enter a new query.
+     */
+    clearQueryOnSelection?: boolean;
 }
 
+/**
+ * **Element is deprecated for the current type of usage.**
+ * Use `MultiSuggestField` as replacement.
+ *
+ * This component will be re-implemented later as a `Select` allowing multiple selections.
+ * @deprecated
+ */
 export function MultiSelect<T>({
     items,
     prePopulateWithItems,
@@ -131,6 +143,8 @@ export function MultiSelect<T>({
     disabled,
     createNewItemFromQuery,
     requestDelay = 0,
+    clearQueryOnSelection = false,
+    className,
     ...otherProps
 }: MultiSelectProps<T>) {
     const [createdItems, setCreatedItems] = React.useState<T[]>([]);
@@ -140,12 +154,12 @@ export function MultiSelect<T>({
     const [selectedItems, setSelectedItems] = React.useState<T[]>(() => (prePopulateWithItems ? [...items] : []));
     //currently focused element in popover list
     const [focusedItem, setFocusedItem] = React.useState<T | null>(null);
-    const [showSpinner, setShowSpinner] = React.useState(false)
+    const [showSpinner, setShowSpinner] = React.useState(false);
     const inputRef = React.useRef<HTMLInputElement>(null);
     const requestState = useRef<{
-        query?: string,
-        timeoutId?: number
-    }>({})
+        query?: string;
+        timeoutId?: number;
+    }>({});
 
     let intent;
     switch (true) {
@@ -171,7 +185,6 @@ export function MultiSelect<T>({
     React.useEffect(() => {
         setItemsCopy([...items, ...createdItems]);
         setFilteredItemList([...items, ...createdItems]);
-        /* eslint-disable react-hooks/exhaustive-deps */
     }, [items.map((item) => itemId(item)).join("|")]);
 
     React.useEffect(() => {
@@ -181,7 +194,6 @@ export function MultiSelect<T>({
                 createdItems: createdSelectedItems,
                 selectedItems,
             });
-        /* eslint-disable react-hooks/exhaustive-deps */
     }, [
         onSelection,
         selectedItems.map((item) => itemId(item)).join("|"),
@@ -205,15 +217,12 @@ export function MultiSelect<T>({
         setSelectedItems((items) => items.filter((item) => itemId(item) !== matcher));
     };
 
-
-
     /**
      * selects and deselects an item from selection list
      * if the item exists it removes it instead
      * @param item
      */
     const onItemSelect = (item: T) => {
-
         if (itemHasBeenSelectedAlready(itemId(item))) {
             removeItemSelection(itemId(item));
         } else {
@@ -222,17 +231,24 @@ export function MultiSelect<T>({
 
         //remove if already exist
         if (createdSelectedItems.find((t) => itemLabel(t) === itemLabel(item))) {
-           setCreatedSelectedItems((prevItems) => prevItems.filter(prevItem => itemLabel(prevItem) !== itemLabel(item)))
-        }else {
+            setCreatedSelectedItems((prevItems) =>
+                prevItems.filter((prevItem) => itemLabel(prevItem) !== itemLabel(item))
+            );
+        } else {
             const wasNewlyCreated = createdItems.find((t) => itemLabel(t) === itemLabel(item));
             //only add to createdSelectedItems if it was previously created and not
             // from the initial items or a possible query response
-            if(wasNewlyCreated){
-                 setCreatedSelectedItems((prevItems) =>[...prevItems, item])
+            if (wasNewlyCreated) {
+                setCreatedSelectedItems((prevItems) => [...prevItems, item]);
             }
         }
 
-        inputRef.current?.select();
+        if (clearQueryOnSelection) {
+            requestState.current.query = "";
+            inputRef.current?.focus();
+        } else {
+            inputRef.current?.select();
+        }
     };
 
     /**
@@ -241,25 +257,25 @@ export function MultiSelect<T>({
      */
     const onQueryChange = (query: string) => {
         if (query.length && query !== requestState.current.query) {
-            requestState.current.query = query
-            if(requestState.current.timeoutId) {
-                clearTimeout(requestState.current.timeoutId)
+            requestState.current.query = query;
+            if (requestState.current.timeoutId) {
+                clearTimeout(requestState.current.timeoutId);
             }
             const fn = async () => {
-                setShowSpinner(true)
-                setFilteredItemList([])
+                setShowSpinner(true);
+                setFilteredItemList([]);
                 const resultFromQuery = runOnQueryChange && (await runOnQueryChange(removeExtraSpaces(query)));
                 if (requestState.current.query === query) {
                     // Only use most recent request
                     setFilteredItemList(() =>
-                        [...(resultFromQuery ?? itemsCopy), ...createdItems].filter(item =>
+                        [...(resultFromQuery ?? itemsCopy), ...createdItems].filter((item) =>
                             itemLabel(item).toLowerCase().includes(query.toLowerCase())
                         )
                     );
-                    setShowSpinner(false)
+                    setShowSpinner(false);
                 }
-            }
-            requestState.current.timeoutId = window.setTimeout(fn, requestDelay && requestDelay > 0 ? requestDelay : 0)
+            };
+            requestState.current.timeoutId = window.setTimeout(fn, requestDelay && requestDelay > 0 ? requestDelay : 0);
         }
     };
 
@@ -275,9 +291,9 @@ export function MultiSelect<T>({
         if (!modifiers.matchesPredicate) {
             return null;
         }
-        let label = itemLabel(item)
-        if(createdItems.find(created => itemId(created) === itemId(item))) {
-            label += newItemPostfix
+        let label = itemLabel(item);
+        if (createdItems.find((created) => itemId(created) === itemId(item))) {
+            label += newItemPostfix;
         }
         return (
             <MenuItem
@@ -295,6 +311,7 @@ export function MultiSelect<T>({
      * clear all selected items in the multi-select input
      */
     const handleClear = () => {
+        requestState.current.query = "";
         setSelectedItems([]);
         setFilteredItemList(itemsCopy);
     };
@@ -306,18 +323,18 @@ export function MultiSelect<T>({
      */
     const removeTagFromSelectionViaIndex = (label: React.ReactNode, index: number) => {
         setSelectedItems([...selectedItems.slice(0, index), ...selectedItems.slice(index + 1)]);
-        setCreatedSelectedItems(items => items.filter(item => itemLabel(item) !== label));
+        setCreatedSelectedItems((items) => items.filter((item) => itemLabel(item) !== label));
     };
 
     /**
      * Utility function to create a new Item. createNewItemFromQuery is assumed to be defined!
      */
     const createNewItem = (query: string): T => {
-        const newItem = createNewItemFromQuery!!(query);
+        const newItem = createNewItemFromQuery!(query);
         //set new items
         setCreatedItems((items) => [...items, newItem]);
-        setCreatedSelectedItems((items) => [...items, newItem])
-        requestState.current.query = ""
+        setCreatedSelectedItems((items) => [...items, newItem]);
+        requestState.current.query = "";
         return newItem;
     };
 
@@ -326,7 +343,12 @@ export function MultiSelect<T>({
      * @param event
      */
     const handleOnKeyUp = (event: React.KeyboardEvent<HTMLElement>) => {
-        if (event.key === "Enter" && !filteredItemList.length && !!requestState.current.query && createNewItemFromQuery) {
+        if (
+            event.key === "Enter" &&
+            !filteredItemList.length &&
+            !!requestState.current.query &&
+            createNewItemFromQuery
+        ) {
             createNewItem(requestState.current.query);
         }
         inputRef.current?.focus();
@@ -374,17 +396,19 @@ export function MultiSelect<T>({
     // Clear button and spinner are both shown as "right element"
     const clearButton =
         selectedItems.length > 0 ? (
-            <Button icon="operation-clear" data-test-id="clear-all-items" minimal={true} onClick={handleClear} />
+            <IconButton
+                disabled={disabled}
+                name="operation-clear"
+                data-test-id="clear-all-items"
+                onClick={handleClear}
+            />
         ) : undefined;
 
-    const spinnerProps = showSpinner ? {
-        rightElement: (
-            <>
-                <Spinner position={"inline"} size={"tiny"} />
-                {clearButton ?? null}
-            </>
-        )
-    } : {}
+    const spinnerProps = showSpinner
+        ? {
+              rightElement: <Spinner position={"inline"} size={"tiny"} />,
+          }
+        : {};
 
     return (
         <BlueprintMultiSelect<T>
@@ -397,7 +421,7 @@ export function MultiSelect<T>({
             itemsEqual={(a: T, b: T) => itemId(a) === itemId(b)}
             selectedItems={selectedItems}
             noResults={<MenuItem disabled={true} text={noResultText} />}
-            tagRenderer={item => itemLabel(item)}
+            tagRenderer={(item) => itemLabel(item)}
             createNewItemRenderer={newItemRenderer}
             onActiveItemChange={(activeItem) => setFocusedItem(activeItem)}
             fill={fullWidth}
@@ -406,31 +430,51 @@ export function MultiSelect<T>({
                 inputProps: {
                     id: "item",
                     autoComplete: "off",
-                    ...inputProps
+                    ...inputProps,
                 },
+                className: `${eccgui}-multiselect` + (className ? ` ${className}` : ""),
+                fill: fullWidth,
                 inputRef: inputRef,
                 intent,
                 addOnBlur: true,
                 onKeyDown: handleOnKeyDown,
                 onKeyUp: handleOnKeyUp,
                 onRemove: removeTagFromSelectionViaIndex,
-                rightElement: disabled ? undefined : clearButton,
+                rightElement: (
+                    <>
+                        {clearButton ?? null}
+                        {otherProps.openOnKeyDown !== true && (
+                            <IconButton disabled={disabled} name={"toggler-caretdown"} />
+                        )}
+                    </>
+                ),
                 tagProps: { minimal: true },
                 disabled,
                 ...tagInputProps,
-                ...spinnerProps
+                ...spinnerProps,
+            }}
+            popoverTargetProps={{
+                className: `${eccgui}-multiselect__target`,
             }}
-
             popoverProps={{
                 minimal: true,
                 placement: "bottom-start",
-                fill: true,
+                matchTargetWidth: fullWidth,
                 ...contextOverlayProps,
             }}
         />
     );
 }
 
+/** @deprecated */
+/*
+function ofType<U>() {
+    return (props: MultiSelectProps<U>) => <MultiSelect<U> {...props} />;
+}
+// */
+
+// we still return the BLueprint element here because it was already used like that
+// MultiSelect.ofType = ofType;
 MultiSelect.ofType = BlueprintMultiSelect.ofType;
 
 export default MultiSelect;

package/src/components/MultiSuggestField/MultiSuggestField.stories.tsx

@@ -0,0 +1,58 @@
+import { loremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { MultiSuggestField } from "./../../../index";
+
+export default {
+    title: "Forms/MultiSuggestField",
+    component: MultiSuggestField,
+    argTypes: {
+        items: {
+            control: "none",
+        },
+    },
+} as Meta<typeof MultiSuggestField>;
+
+const Template: StoryFn<typeof MultiSuggestField> = (args) => (
+    <div>
+        <MultiSuggestField {...args} />
+    </div>
+);
+
+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` };
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    items,
+    canCreateNewItem: true,
+    prePopulateWithItems: false,
+    itemId: (item) => item.testId,
+    itemLabel: (item) => item.testLabel,
+    openOnKeyDown: true,
+};
+
+/**
+ * Display always the dropdown after the element was clicked on.
+ * Do not wait until the query input was startet.
+ */
+export const dropdownOnFocus = Template.bind({});
+dropdownOnFocus.args = {
+    items,
+    canCreateNewItem: true,
+    prePopulateWithItems: false,
+    itemId: (item) => item.testId,
+    itemLabel: (item) => item.testLabel,
+};

package/src/components/MultiSuggestField/MultiSuggestField.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { MultiSelect, MultiSelectProps } from "../MultiSelect/MultiSelect";
+
+export type MultiSuggestFieldProps<T> = MultiSelectProps<T>;
+
+/**
+ * Element behaves very similar to `SuggestField` but allows multiple selections.
+ * Its value does not represent a string but a stack of objects.
+ *
+ * Example usage: input field for user created tags.
+ */
+export function MultiSuggestField<T>({ className, ...otherProps }: MultiSuggestFieldProps<T>) {
+    // Currently this works only as an alias element for `MultiSelect`.
+    return (
+        <MultiSelect<T>
+            className={`${eccgui}-multisuggestfield` + (className ? ` ${className}` : "")}
+            {...otherProps}
+        />
+    );
+}

package/src/components/Notification/notification.scss

@@ -1,26 +1,25 @@
 // TODO: add vars and process them
 
 @use "sass:math";
-
 @import "~@blueprintjs/core/src/components/toast/toast";
 
 .#{$eccgui}-notification {
-    border-style: solid;
-    border-width: 1px 1px 1px 0.25rem;
-    border-color: $eccgui-color-application-text;
-    color: $eccgui-color-application-text;
-    background-color: $eccgui-color-application-background;
-    font-size: 1rem;
-    line-height: $eccgui-size-typo-base-lineheight;
-    min-width: math.div(4, 16) * 100vw;
     width: 100%;
+    min-width: math.div(4, 16) * 100vw;
     max-width: 40rem;
     margin-top: $eccgui-size-block-whitespace;
+    font-size: 1rem;
+    line-height: $eccgui-size-typo-base-lineheight;
+    color: $eccgui-color-application-text;
+    background-color: $eccgui-color-application-background;
+    border-color: $eccgui-color-application-text;
+    border-style: solid;
+    border-width: 1px 1px 1px 0.25rem;
 
     & > .#{$eccgui}-icon {
-        color: inherit;
         flex-grow: 0;
         flex-shrink: 0;
+        color: inherit;
     }
 
     &.#{$eccgui}-notification--static > .#{$ns}-button-group {
@@ -31,29 +30,33 @@
 
     &:not(.#{$eccgui}-notification--toast) {
         max-width: none;
-        box-shadow: none;
         margin-top: 0;
+        box-shadow: none;
+    }
+
+    .#{$eccgui}-card__content & {
+        min-width: unset;
     }
 
     &.#{$eccgui}-intent--info {
-        border-color: $eccgui-color-info-text;
         color: $eccgui-color-info-text;
         background-color: $eccgui-color-info-background;
+        border-color: $eccgui-color-info-text;
     }
     &.#{$eccgui}-intent--success {
-        border-color: $eccgui-color-success-text;
         color: $eccgui-color-success-text;
         background-color: $eccgui-color-success-background;
+        border-color: $eccgui-color-success-text;
     }
     &.#{$eccgui}-intent--warning {
-        border-color: $eccgui-color-warning-text;
         color: $eccgui-color-warning-text;
         background-color: $eccgui-color-warning-background;
+        border-color: $eccgui-color-warning-text;
     }
     &.#{$eccgui}-intent--danger {
-        border-color: $eccgui-color-danger-text;
         color: $eccgui-color-danger-text;
         background-color: $eccgui-color-danger-background;
+        border-color: $eccgui-color-danger-text;
     }
 }
 
@@ -65,15 +68,15 @@
 
 .#{$eccgui}-notification__content {
     display: flex;
-    justify-content: space-between;
     align-items: baseline;
+    justify-content: space-between;
     margin: -10px; // TODO: use blueprint var ofr toast padding here
 }
 
 .#{$eccgui}-notification__messagebody {
-    padding: 10px; // TODO: use blueprint var ofr toast padding here
     flex-grow: 1;
     flex-shrink: 1;
+    padding: 10px; // TODO: use blueprint var ofr toast padding here
 }
 
 .#{$eccgui}-notification__actions {

package/src/components/OverviewItem/OverviewItem.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -18,19 +19,18 @@ export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement>
  */
 export const OverviewItem = ({
     children,
-    className = '',
+    className = "",
     densityHigh = false,
     hasSpacing = false,
     ...otherProps
 }: OverviewItemProps) => {
-
     const item = (
         <div
             {...otherProps}
             className={
                 `${eccgui}-overviewitem__item ` +
-                (densityHigh ? `${eccgui}-overviewitem__item--highdensity ` : '') +
-                (hasSpacing ? `${eccgui}-overviewitem__item--hasspacing ` : '') +
+                (densityHigh ? `${eccgui}-overviewitem__item--highdensity ` : "") +
+                (hasSpacing ? `${eccgui}-overviewitem__item--hasspacing ` : "") +
                 className
             }
         >
@@ -38,24 +38,15 @@ export const OverviewItem = ({
         </div>
     );
 
-    let accessibilityParameters:  { [key: string]: any; } = {};
-    if (
-        typeof otherProps.onClick !== 'undefined' ||
-        typeof otherProps.onKeyDown !== 'undefined'
-    ) {
-        accessibilityParameters['tabIndex'] = 0;
+    const accessibilityParameters: { [key: string]: any } = Object.create(null);
+    if (typeof otherProps.onClick !== "undefined" || typeof otherProps.onKeyDown !== "undefined") {
+        accessibilityParameters["tabIndex"] = 0;
     }
-    if (
-        typeof otherProps.onClick !== 'undefined' &&
-        typeof otherProps.onKeyDown !== 'undefined'
-    ) {
-        accessibilityParameters['role'] = "button";
+    if (typeof otherProps.onClick !== "undefined" && typeof otherProps.onKeyDown !== "undefined") {
+        accessibilityParameters["role"] = "button";
     }
 
-    return React.cloneElement(
-            item,
-            accessibilityParameters
-    );
-}
+    return React.cloneElement(item, accessibilityParameters);
+};
 
 export default OverviewItem;

package/src/components/PropertyValuePair/PropertyName.tsx

@@ -1,15 +1,28 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Label from "../Label/Label";
 
-export interface PropertyNameProps extends React.HTMLAttributes<HTMLElement> {};
+export interface PropertyNameProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Increase or decrease the width used for the property name.
+     */
+    size?: "small" | "medium" | "large";
+}
 
-export const PropertyName = ({ className = "", children, ...otherProps }: PropertyNameProps) => {
+export const PropertyName = ({ className = "", size, children, ...otherProps }: PropertyNameProps) => {
     return (
-        <dt className={`${eccgui}-propertyvalue__property` + (className ? " " + className : "")} {...otherProps}>
+        <dt
+            className={
+                `${eccgui}-propertyvalue__property` +
+                (size ? ` ${eccgui}-propertyvalue__property--${size}` : "") +
+                (className ? " " + className : "")
+            }
+            {...otherProps}
+        >
             <div>{typeof children === "string" ? <Label text={children} isLayoutForElement="span" /> : children}</div>
         </dt>
     );
-}
+};
 
 export default PropertyName;

package/src/components/PropertyValuePair/propertyvalue.scss

@@ -46,9 +46,25 @@
     }
 }
 
+.#{$eccgui}-propertyvalue__property--small {
+    width: math.div(2, 16) * 100%;
+
+    & + .#{$eccgui}-propertyvalue__value {
+        margin-left: math.div(2, 16) * 100%;
+    }
+}
+
+.#{$eccgui}-propertyvalue__property--large {
+    width: math.div(5, 16) * 100%;
+
+    & + .#{$eccgui}-propertyvalue__value {
+        margin-left: math.div(5, 16) * 100%;
+    }
+}
+
 .#{$eccgui}-propertyvalue__value {
-    margin-left: math.div(3, 16) * 100%;
     box-sizing: content-box;
+    margin-left: math.div(3, 16) * 100%;
 
     &:not(:last-child) {
         .#{$eccgui}-propertyvalue__pair--hasdivider > & {