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

package/src/components/MultiSelect/MultiSelect.tsx

@@ -1,12 +1,14 @@
 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> {
+export interface SelectedParamsType<T> {
     newlySelected: T;
     selectedItems: T[];
     createdItems: Partial<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}
             />
         );
@@ -244,20 +254,16 @@ function MultiSelect<T>({
      * @param label
      * @param index
      */
-    const removeTagFromSelectionViaIndex = (label: string, index: number) => {
+    const removeTagFromSelectionViaIndex = (label: React.ReactNode, 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,

package/src/components/Notification/Notification.stories.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+import Notification from "./Notification";
+import HtmlContentBlock from "./../Typography/HtmlContentBlock";
+import Button from "./../Button/Button";
+import Spacing from "./../Separation/Spacing";
+
+export default {
+    title: "Components/Notification",
+    component: Notification,
+    argTypes: {
+        className: {
+            description: "A space-delimited list of class names.",
+            control: "text",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "string" },
+            }
+        },
+        onDismiss: {
+            description: "Callback invoked when the toast is dismissed, either by the user or by the timeout.",
+            control: "none",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "(didTimeoutExpire: boolean) => void" },
+            }
+        },
+        timeout: {
+            description: "Milliseconds to wait before automatically dismissing toast. Providing a value less than or equal to 0 will disable the timeout.",
+            control: "number",
+            table: {
+                defaultValue: { summary: 0 },
+                type: { summary: "number" },
+            }
+        },
+        message: {
+            control: "none",
+        },
+    },
+} as ComponentMeta<typeof Notification>;
+
+const TemplateFull: ComponentStory<typeof Notification> = (args) => (
+    <Notification {...args} />
+);
+
+export const ExampleWithMessage = TemplateFull.bind({});
+ExampleWithMessage.args = {
+    message: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
+    onDismiss: false, // workaround for undefined function in Storybook
+};
+
+export const ExampleWithChildren = TemplateFull.bind({});
+ExampleWithChildren.args = {
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />
+            <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
+        </HtmlContentBlock>
+    ),
+    onDismiss: false, // workaround for undefined function in Storybook
+};
+
+export const ExampleNeutralMessage = TemplateFull.bind({});
+ExampleNeutralMessage.args = {
+    message: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
+    onDismiss: false, // workaround for undefined function in Storybook
+    neutral: true,
+};
+
+export const ExampleWithActions = TemplateFull.bind({});
+ExampleWithActions.args = {
+    message: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
+    onDismiss: false, // workaround for undefined function in Storybook
+    danger: true,
+    actions: [
+        <Button text="Something" key="b1" />,
+        <Spacing size="tiny" vertical />,
+        <Button text="Important" hasStateDanger key="b2" />
+    ]
+};

package/src/components/Notification/Notification.tsx

@@ -1,9 +1,65 @@
 import React from "react";
-import { Toast as BlueprintToast, Classes as BlueprintClassNames } from "@blueprintjs/core";
+import {
+    Toast as BlueprintToast,
+    ToastProps as BlueprintToastProps,
+    Classes as BlueprintClassNames,
+} from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {ClassNames as IntentClassNames} from "../../common/Intent";
 import Icon from "./../Icon/Icon";
+import { ValidIconName } from "./../Icon/canonicalIconNames";
 
+export interface NotificationProps extends Omit<BlueprintToastProps, "message" | "action" | "icon" | "intent">, React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Extra user action elements
+     */
+    actions?: JSX.Element | JSX.Element[];
+    /**
+     * Notification message that can be used as alternative to children elements.
+     */
+    message?: JSX.Element | string;
+    /**
+     * Notification has a neutral color scheme.
+     */
+    neutral?: boolean;
+    /**
+     * Notification is a success info.
+     * This defines the colorization and the icon symbol.
+     */
+    success?: boolean;
+    /**
+     * Notification is a warning alert.
+     * This defines the colorization and the icon symbol.
+     */
+    warning?: boolean;
+    /**
+     * Notification is a danger alert.
+     * This defines the colorization and the icon symbol.
+     */
+    danger?: boolean;
+    /**
+     * Notification uses the the given space more flexible.
+     * Depracation notice: Property name will removed in futire versions.
+     * Please use `flexWidth`.
+     * @depracted
+     */
+    fullWidth?: boolean;
+    /**
+     * Notification uses the the given space more flexible.
+     * Default notifcation is displayed in min and max limits.
+     * Those limits are removed by setting this property to `true`.
+     */
+    flexWidth?: boolean;
+    /**
+     * Icon used as depiction that is displayed with the notification.
+     */
+    iconName?: ValidIconName;
+}
+
+/**
+ * Displays a notification message, optionally combined with depiction and further action buttons.
+ * By default it uses colorization of an blueish info alert.
+ */
 function Notification({
     actions,
     children,
@@ -13,11 +69,12 @@ function Notification({
     warning = false,
     danger = false,
     neutral = false,
-    fullWidth = false,
+    fullWidth = false, // deprecated
+    flexWidth = false,
     iconName = "state-info",
     timeout,
     ...otherProps
-}: any) {
+}: NotificationProps) {
     let intentLevel: string = IntentClassNames.INFO;
     let iconSymbol = iconName;
     switch (true) {
@@ -55,7 +112,8 @@ function Notification({
                 `${eccgui}-notification ` +
                 intentLevel +
                 (className ? ` ${className}` : "") +
-                (fullWidth ? ` ${eccgui}-notification--fullwidth` : "") +
+                (fullWidth ? ` ${eccgui}-notification--fullwidth` : "") + // deprecated
+                (flexWidth ? ` ${eccgui}-notification--flexwidth` : "") +
                 (otherProps.onDismiss ? "" : ` ${eccgui}-notification--static`)
             }
             message={content}

package/src/components/Notification/notification.scss

@@ -55,6 +55,7 @@
     }
 }
 
+.#{$eccgui}-notification--flexwidth,
 .#{$eccgui}-notification--fullwidth {
     min-width: 0;
     max-width: none;
@@ -77,7 +78,7 @@
     flex-grow: 0;
     flex-shrink: 0;
 
-    .#{$ns}-button {
+    .#{$ns}-button:not([class*="intent"]) {
         color: inherit;
     }
 }

package/src/components/OverviewItem/OverviewItemList.tsx

@@ -18,7 +18,7 @@ export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListEle
      * Use multiple columns.
      * Currently only lists using 1 and 2 columns are supported.
      */
-    columns?: number;
+    columns?: 1 | 2;
 }
 
 /**
@@ -42,12 +42,12 @@ function OverviewItemList({
                 (densityHigh ? `${eccgui}-overviewitem__list--highdensity ` : '') +
                 (hasDivider ? `${eccgui}-overviewitem__list--hasdivider ` : '') +
                 (hasSpacing ? `${eccgui}-overviewitem__list--hasspacing ` : '') +
-                (columns > 1 ? `${eccgui}-overviewitem__list--hascolumns ` : '') + // TODO: add number
+                (columns > 1 ? `${eccgui}-overviewitem__list--hascolumns ` : '') + // FIXME: Support numbers > 2
                 className
             }
         >
             {
-                React.Children.map(children, (child, i) => {
+                React.Children.map(children, (child) => {
                     return <li>{ child }</li>
                 })
             }

package/src/components/RadioButton/radiobutton.scss

@@ -7,6 +7,10 @@
             box-shadow: none;
         }
 
+        input:focus ~ .#{$ns}-control-indicator {
+            outline-offset: 1px;
+        }
+
         input:disabled ~ .#{$ns}-control-indicator,
         input:disabled:checked ~ .#{$ns}-control-indicator
         {

package/src/components/Spinner/Spinner.tsx

@@ -28,7 +28,7 @@ export interface SpinnerProps extends Partial<BlueprintOverlayProps & Omit<Bluep
 function Spinner({
     className = "",
     color = "inherit",
-    description = "Loading indicator", // currently unsupported (TODO)
+    description = "Loading indicator", // currently unsupported (FIXME)
     position = "local",
     size,
     stroke,
@@ -41,6 +41,7 @@ function Spinner({
             const timeoutId = setTimeout(() => setShowSpinner(true), delay);
             return () => clearTimeout(timeoutId);
         }
+        return;
     }, [showSpinner, delay]);
     const availableIntent = ["primary", "success", "warning", "danger", "inherit"];
     const internSizes = {

package/src/components/Switch/switch.scss

@@ -2,3 +2,4 @@
     currently not used, we need to control switch layout in
     ../Checkbox/checkbox.scss for now
 */
+// FIXME: scss styles

package/src/components/Tabs/Tab.tsx

@@ -62,7 +62,7 @@ export const transformTabProperties = ({
 
 /*
 
-TODO: Try to overload the original Tab element. Currently it does not work
+NOTE: Try to overload the original Tab element. Currently it does not work.
 (at least inside Storybook) because the set displayName is overwritten and
 Blueprints Tabs integration cannot match the new Tab element correctly by
 checking the displayName.
@@ -105,7 +105,6 @@ class Tab extends AbstractPureComponent2<TabProps> {
 }
 
 //*
-console.log(Tab.displayName);
 export default Tab;
 //*/
 

package/src/components/Tabs/Tabs.tsx

@@ -29,8 +29,6 @@ function Tabs(
         ...restProps
     }: TabsProps) {
 
-    // TODO React.Children.toArray(children).forEach((e) => {console.log(e)});
-
     return (
         <BlueprintTabs
             className={
@@ -43,9 +41,7 @@ function Tabs(
         >
             {!!tabs ? (
                 tabs.map(tab => {
-                    const e = <Tab {...transformTabProperties(tab)} />;
-                    // TODO console.log(e);
-                    return e;
+                    return <Tab {...transformTabProperties(tab)} />;
                 })
             ) : (
                 children

package/src/components/Tabs/stories/Tabs.stories.tsx

@@ -22,8 +22,8 @@ export default {
             }
         },
         /*
-        TODO: we currently cannot support tis because Blueprint set then !important
-        styles preventig tab background colors.
+        NOTE: we currently cannot support this because Blueprint set then !important
+        styles prevent tab background colors.
 
         animate: {
             description: "Whether the selected tab indicator should animate its movement.",
@@ -87,7 +87,7 @@ TabsContainerUncontrolled.args = {
 };
 
 /*
-TODO: this integration does currently not work, reason is not clear.
+FIXME: this integration does currently not work, reason is not clear. See Tab component comments at bottom.
 export const UncontrolledElementsUsage = TemplateFull.bind({});
 UncontrolledElementsUsage.args = {
     id: "storytabs2",

package/src/components/Tag/TagList.tsx

@@ -16,6 +16,7 @@ function TagList({
                 `${eccgui}-tag__list` +
                 ((className && label) ? ' ' + className : '')
             }
+            {...otherProps}
         >
             {
                 React.Children.map(children, (child, i) => {

package/src/components/Tag/tag.scss

@@ -18,7 +18,7 @@ $tag-line-height-large: $eccgui-size-typo-tag-large; // !default;
 $tag-padding-large: ($tag-height-large - $tag-line-height-large); // !default;
 // $tag-icon-spacing: ($tag-height - 12px) / 2 !default;
 // $tag-icon-spacing-large: ($tag-height-large - $pt-icon-size-standard) / 2 !default;
-// $tag-round-adjustment: 2px !default;
+$tag-round-adjustment: 0px !default;
 
 @import "~@blueprintjs/core/src/components/tag/tag";
 

package/src/components/Toolbar/toolbar.scss

@@ -26,7 +26,7 @@
 
     .#{$eccgui}-toolbar--vertical > & {
         flex-direction: column;
-        align-items: center;
+        align-items: stretch;
     }
 }