@eccenca/gui-elements 23.5.0 → 23.6.0-rc.1

package/src/components/Link/link.scss

@@ -9,6 +9,7 @@
         outline: none;
         outline-offset: 0;
     }
+
     &:focus-visible {
         outline: rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
         outline-offset: 1px;

package/src/components/List/List.tsx

@@ -1,52 +1,50 @@
+import React, { useEffect } from "react";
+
 import Button from "../Button/Button";
-import React, {useEffect} from "react";
 
-export interface ListProps<T>{
-    items: T[]
+export interface ListProps<T> {
+    items: T[];
     /** Renders the item. */
-    itemRenderer: (item: T) => React.ReactNode
+    itemRenderer: (item: T) => React.ReactNode;
     /** The ID/key of an item. */
-    itemId: (item: T) => string
+    itemId: (item: T) => string;
     /** Limit the numbers of shown (and rendered) components. */
     limitOptions?: {
-        initialMax: number
-        stepSize: number
-    }
-    moreLabel?: string
+        initialMax: number;
+        stepSize: number;
+    };
+    moreLabel?: string;
 }
 
 /** A generic list component with support of various performance/scalability improvements. */
-export function List<T>({
-    items,
-    itemRenderer,
-    itemId,
-    limitOptions,
-    moreLabel = "Show more..."
-}: ListProps<T>) {
+export function List<T>({ items, itemRenderer, itemId, limitOptions, moreLabel = "Show more..." }: ListProps<T>) {
     // The number of items to show in the list, undefined means unlimited
-    const [nrOfItemsToShow, setNrOfItemsToShow] = React.useState<number | undefined>(limitOptions?.initialMax ?? undefined)
+    const [nrOfItemsToShow, setNrOfItemsToShow] = React.useState<number | undefined>(
+        limitOptions?.initialMax ?? undefined
+    );
 
     useEffect(() => {
-        setNrOfItemsToShow(limitOptions?.initialMax ?? undefined)
-    }, [items.length, limitOptions?.initialMax])
+        setNrOfItemsToShow(limitOptions?.initialMax ?? undefined);
+    }, [items.length, limitOptions?.initialMax]);
 
     const onShowMore = () => {
-        if(limitOptions) {
-            setNrOfItemsToShow(current => (current ?? 0)  + limitOptions.stepSize)
+        if (limitOptions) {
+            setNrOfItemsToShow((current) => (current ?? 0) + limitOptions.stepSize);
         }
-    }
+    };
 
-    return <ol>
-        {
-            (nrOfItemsToShow ? items.slice(0, nrOfItemsToShow) : items)
-                .map(item => {
-                    return <li key={itemId(item)}>
-                        {itemRenderer(item)}
-                    </li>
-                })
-        }
-        {nrOfItemsToShow != null && nrOfItemsToShow < items.length && <Button onClick={onShowMore} fill={true}>{moreLabel}</Button>}
-    </ol>
+    return (
+        <ol>
+            {(nrOfItemsToShow ? items.slice(0, nrOfItemsToShow) : items).map((item) => {
+                return <li key={itemId(item)}>{itemRenderer(item)}</li>;
+            })}
+            {nrOfItemsToShow != null && nrOfItemsToShow < items.length && (
+                <Button onClick={onShowMore} fill={true}>
+                    {moreLabel}
+                </Button>
+            )}
+        </ol>
+    );
 }
 
-export default List
+export default List;

package/src/components/Menu/Menu.tsx

@@ -1,27 +1,16 @@
-import React from 'react';
-import {
-    Menu as BlueprintMenu,
-    MenuProps as BlueprintMenuProps,
-} from "@blueprintjs/core";
+import React from "react";
+import { Menu as BlueprintMenu, MenuProps as BlueprintMenuProps } from "@blueprintjs/core";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface MenuProps extends BlueprintMenuProps {
-    // we do not add own changes here currently
-}
+export type MenuProps = BlueprintMenuProps;
 
-export const Menu = ({
-    children,
-    className="",
-    ...restProps
-}: MenuProps) => {
+export const Menu = ({ children, className = "", ...restProps }: MenuProps) => {
     return (
-        <BlueprintMenu
-            {...restProps}
-            className={`${eccgui}-menu__list ` + className}
-        >
+        <BlueprintMenu {...restProps} className={`${eccgui}-menu__list ` + className}>
             {children}
         </BlueprintMenu>
     );
-}
+};
 
 export default Menu;

package/src/components/Menu/MenuDivider.tsx

@@ -1,26 +1,16 @@
-import React from 'react';
-import {
-    MenuDivider as BlueprintMenuDivider,
-    MenuDividerProps as BlueprintMenuDividerProps,
-} from "@blueprintjs/core";
+import React from "react";
+import { MenuDivider as BlueprintMenuDivider, MenuDividerProps as BlueprintMenuDividerProps } from "@blueprintjs/core";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface MenuDividerProps extends BlueprintMenuDividerProps {
-    // we do not add own changes here currently
-}
+export type MenuDividerProps = BlueprintMenuDividerProps;
 
-export const MenuDivider = ({
-    children,
-    className="",
-    ...restProps
-}: MenuDividerProps) => {
+export const MenuDivider = ({ children, className = "", ...restProps }: MenuDividerProps) => {
     return (
-        <BlueprintMenuDivider
-            {...restProps}
-            className={`${eccgui}-menu__divider ` + className}>
+        <BlueprintMenuDivider {...restProps} className={`${eccgui}-menu__divider ` + className}>
             {children}
         </BlueprintMenuDivider>
     );
-}
+};
 
 export default MenuDivider;

package/src/components/Menu/MenuItem.tsx

@@ -1,52 +1,40 @@
-import React from 'react';
-import {
-    MenuItem as BlueprintMenuItem,
-    MenuItemProps as BlueprintMenuItemProps
-} from "@blueprintjs/core";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
-import Icon from '../Icon/Icon';
-import { TestIconProps } from "./../Icon/TestIcon";
-import { openInNewTab } from '../../common/utils/openInNewTab';
+import React from "react";
+import { MenuItem as BlueprintMenuItem, MenuItemProps as BlueprintMenuItemProps } from "@blueprintjs/core";
+
+import { openInNewTab } from "../../common/utils/openInNewTab";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ValidIconName } from "../Icon/canonicalIconNames";
+import Icon from "../Icon/Icon";
+
+import { TestIconProps } from "./../Icon/TestIcon";
 
-export interface MenuItemProps extends Omit<BlueprintMenuItemProps, "icon" | "children">, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "onFocus" | "target" | "children"> {
+export interface MenuItemProps
+    extends Omit<BlueprintMenuItemProps, "icon" | "children">,
+        Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "onFocus" | "target" | "children"> {
     /*
      * If set the icon is diplayed on the left side of the menu item.
      */
     icon?: ValidIconName | string[] | React.ReactElement<TestIconProps>;
-    children?: React.ReactNode
+    children?: React.ReactNode;
 }
 
 /**
  * Single item, used as child inside `Menu`.
  */
-export const MenuItem = ({
-    children,
-    className = "",
-    icon,
-    onClick,
-    href,
-    ...restProps
-}: MenuItemProps) => {
+export const MenuItem = ({ children, className = "", icon, onClick, href, ...restProps }: MenuItemProps) => {
     return (
         <BlueprintMenuItem
             {...restProps}
             href={href}
-            onClick={(e:React.MouseEvent<HTMLElement>) => openInNewTab(e as React.MouseEvent<HTMLAnchorElement>, onClick, href)}
-            className={`${eccgui}-menu__item ` + className}
-            icon={
-                icon ? (
-                    (typeof icon === "string" || Array.isArray(icon)) ? (
-                        <Icon name={icon} />
-                    ) : (
-                        icon
-                    )
-                ) : false
+            onClick={(e: React.MouseEvent<HTMLElement>) =>
+                openInNewTab(e as React.MouseEvent<HTMLAnchorElement>, onClick, href)
             }
+            className={`${eccgui}-menu__item ` + className}
+            icon={icon ? typeof icon === "string" || Array.isArray(icon) ? <Icon name={icon} /> : icon : false}
         >
             {children ?? null}
         </BlueprintMenuItem>
     );
-}
+};
 
 export default MenuItem;

package/src/components/Menu/Stories/Menu.stories.tsx

@@ -1,31 +1,35 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Menu, MenuItem, MenuDivider } from "../../../../index";
-import { Default as MenuItemStory } from '../Stories/MenuItem.stories';
-import { Default as ContentMenuStory } from '../../ContextOverlay/ContextMenu.stories';
+import { OverlaysProvider } from "@blueprintjs/core";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Menu, MenuDivider, MenuItem } from "../../../../index";
+import { Default as ContentMenuStory } from "../../ContextOverlay/ContextMenu.stories";
+import { Default as MenuItemStory } from "../Stories/MenuItem.stories";
 
 export default {
     title: "Components/Menu",
     component: Menu,
-    subcomponents: {MenuItem, MenuDivider},
+    subcomponents: { MenuItem, MenuDivider },
     argTypes: {
         children: {
             control: "none",
         },
-    }
-} as ComponentMeta<typeof Menu>
+    },
+} as Meta<typeof Menu>;
 
-const MenuExample: ComponentStory<typeof Menu> = (args) => (
-    <Menu style={{width: "200px"}} {...args} />
+const MenuExample: StoryFn<typeof Menu> = (args) => (
+    <OverlaysProvider>
+        <Menu style={{ width: "200px" }} {...args} />
+    </OverlaysProvider>
 );
 
-export const Default  = MenuExample.bind({});
+export const Default = MenuExample.bind({});
 Default.args = {
-    children : (
+    children: (
         <>
             {ContentMenuStory.args.children}
-            <MenuDivider title ="Second menu part"/>
-            <MenuItem {...MenuItemStory.args} selected />
+            <MenuDivider title="Second menu part" />
+            <MenuItem {...MenuItemStory.args} active />
         </>
     ),
 };

package/src/components/Menu/Stories/MenuItem.stories.tsx

@@ -1,7 +1,10 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
+import { Meta, StoryFn } from "@storybook/react";
+
 import { Menu, MenuItem, TestIcon } from "../../../../index";
+
 import canonicalIcons from "./../../Icon/canonicalIconNames";
 
 export default {
@@ -10,30 +13,31 @@ export default {
     argTypes: {
         icon: {
             control: "select",
-            options: [
-            "Test icon",
-                ...(Object.keys(canonicalIcons)),
-            ],
+            options: ["Test icon", ...Object.keys(canonicalIcons)],
             mapping: {
-            "Test icon": <TestIcon tryout={LogoReact} className="testclass-icon"/>,
-                ...(Object.keys(canonicalIcons)),
-            }
+                "Test icon": <TestIcon tryout={LogoReact} className="testclass-icon" />,
+                ...Object.keys(canonicalIcons),
+            },
         },
-    }
-} as ComponentMeta<typeof MenuItem>
+    },
+} as Meta<typeof MenuItem>;
 
-const MenuExample: ComponentStory<typeof MenuItem> = (args) => (
-    <Menu style={{width: "200px"}}><MenuItem {...args} /></Menu>
+const MenuExample: StoryFn<typeof MenuItem> = (args) => (
+    <OverlaysProvider>
+        <Menu style={{ width: "200px" }}>
+            <MenuItem {...args} />
+        </Menu>
+    </OverlaysProvider>
 );
 
-export const Default  = MenuExample.bind({});
+export const Default = MenuExample.bind({});
 Default.args = {
     children: (
         <>
-        <MenuItem key="m6" text={"Sub option 1"} />
-        <MenuItem key="m7" text={"Sub option 2"} />
+            <MenuItem key="m6" text={"Sub option 1"} />
+            <MenuItem key="m7" text={"Sub option 2"} />
         </>
     ),
     text: "Parent option",
-    key: "m4"
+    key: "m4",
 };

package/src/components/Menu/index.ts

@@ -1,3 +1,3 @@
 export * from "./Menu";
-export * from "./MenuDivider"
+export * from "./MenuDivider";
 export * from "./MenuItem";

package/src/components/Menu/menu.scss

@@ -32,11 +32,13 @@ $dark-minimal-button-background-color-active: rgba($gray3, 0.3) !default;
 // $menu-item-line-height: round($pt-font-size * $menu-item-line-height-factor);
 // $menu-item-line-height-large: round($pt-font-size-large * $menu-item-line-height-factor);
 $menu-min-width: 0 !default;
+
 // $menu-item-padding: ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
 // $menu-item-padding-large: ($pt-button-height-large - $pt-icon-size-large) * 0.5 !default;
 // $menu-item-padding-vertical: ($pt-button-height - $menu-item-line-height) * 0.5 !default;
 // $menu-item-padding-vertical-large: ($pt-button-height-large - $menu-item-line-height-large) * 0.5 !default;
 $menu-background-color: transparent !default;
+
 // $dark-menu-background-color: $dark-gray4 !default;
 // $menu-item-color-hover: $minimal-button-background-color-hover !default;
 // $menu-item-color-active: $minimal-button-background-color-active !default;
@@ -49,20 +51,25 @@ $menu-background-color: transparent !default;
     padding: 0;
 
     .#{$ns}-popover2-content > & {
-        padding: $eccgui-size-inline-whitespace * 0.5;
         min-width: 10em;
         max-width: 20em;
+        padding: $eccgui-size-inline-whitespace * 0.5;
     }
 }
 
+.#{$ns}-menu-header {
+    margin-right: unset;
+    margin-left: unset;
+}
+
 span.#{$ns}-menu-item-icon:empty {
     display: none;
 }
 
 .#{$prefix}--side-nav--rail {
     .#{$ns}-menu-item {
+        max-width: calc(#{2 * $menu-item-padding} + 20px); // padding + normal icon width
         white-space: nowrap;
-        max-width: calc(#{2*$menu-item-padding} + 20px); // padding + normal icon width
     }
 
     .#{$ns}-text-overflow-ellipsis {

package/src/components/MultiSelect/MultiSelect.tsx

@@ -22,6 +22,11 @@ export type SelectedParamsType<T> = MultiSelectSelectionProps<T>;
 
 export interface MultiSelectProps<T>
     extends Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
+    /**
+     * Predefined selected values
+     */
+
+    selectedItems?: T[];
     /**
      * Additional class name, space separated.
      */
@@ -124,6 +129,7 @@ export interface MultiSelectProps<T>
  */
 export function MultiSelect<T>({
     items,
+    selectedItems: externalSelectedItems = [],
     prePopulateWithItems,
     itemId,
     itemLabel,
@@ -151,7 +157,9 @@ export function MultiSelect<T>({
     const [createdSelectedItems, setCreatedSelectedItems] = React.useState<T[]>([]);
     const [itemsCopy, setItemsCopy] = React.useState<T[]>([...items]);
     const [filteredItemList, setFilteredItemList] = React.useState<T[]>([]);
-    const [selectedItems, setSelectedItems] = React.useState<T[]>(() => (prePopulateWithItems ? [...items] : []));
+    const [selectedItems, setSelectedItems] = React.useState<T[]>(() =>
+        prePopulateWithItems ? [...items] : [...externalSelectedItems]
+    );
     //currently focused element in popover list
     const [focusedItem, setFocusedItem] = React.useState<T | null>(null);
     const [showSpinner, setShowSpinner] = React.useState(false);
@@ -185,7 +193,7 @@ export function MultiSelect<T>({
     React.useEffect(() => {
         setItemsCopy([...items, ...createdItems]);
         setFilteredItemList([...items, ...createdItems]);
-    }, [items.map((item) => itemId(item)).join("|")]);
+    }, [items.map((item) => itemId(item)).join("|"), createdItems.map((item) => itemId(item)).join("|")]);
 
     React.useEffect(() => {
         onSelection &&

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

@@ -1,7 +1,8 @@
+import React, { useCallback, useMemo, useState } from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { MultiSuggestField } from "./../../../index";
+import { MultiSelectSelectionProps, MultiSuggestField } from "./../../../index";
 
 export default {
     title: "Forms/MultiSuggestField",
@@ -56,3 +57,60 @@ dropdownOnFocus.args = {
     itemId: (item) => item.testId,
     itemLabel: (item) => item.testLabel,
 };
+
+const selectedItems = items.slice(1, 3);
+
+/**
+ * Set the default selected values from the client code.
+ */
+export const predefinedValues = Template.bind({});
+predefinedValues.args = {
+    items,
+    selectedItems,
+    prePopulateWithItems: false,
+    itemId: (item) => item.testId,
+    itemLabel: (item) => item.testLabel,
+};
+
+/**
+ * New item creation, add to a existing list
+ */
+export const newItemCreation = Template.bind({});
+newItemCreation.args = {
+    items,
+    createNewItemFromQuery: (query) => ({ testId: `${query}-id`, testLabel: query }),
+    prePopulateWithItems: false,
+    itemId: (item) => item.testId,
+    itemLabel: (item) => item.testLabel,
+};
+
+const CreationTemplate: StoryFn = () => {
+    const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+    const empty = useMemo<string[]>(() => [], []);
+
+    const identity = useCallback((item: string): string => item, []);
+
+    const handleOnSelect = useCallback((params: MultiSelectSelectionProps<string>) => {
+        const selected = params.selectedItems;
+
+        setSelectedValues(selected);
+    }, []);
+
+    return (
+        <MultiSuggestField<string>
+            items={empty}
+            selectedItems={selectedValues}
+            onSelection={handleOnSelect}
+            itemId={identity}
+            itemLabel={identity}
+            createNewItemFromQuery={identity}
+            prePopulateWithItems
+        />
+    );
+};
+
+/**
+ * Completely create all items from quieries
+ */
+export const buildItemsFromQuery = CreationTemplate.bind({});

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

@@ -1,8 +1,9 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
-import { Notification, HtmlContentBlock, Button, Spacing} from "../../../index";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { helpersArgTypes } from "../../../.storybook/helpers";
+import { Button, HtmlContentBlock, Notification, Spacing } from "../../../index";
 
 export default {
     title: "Components/Notification",
@@ -17,9 +18,7 @@ export default {
     },
 } as ComponentMeta<typeof Notification>;
 
-const TemplateFull: ComponentStory<typeof Notification> = (args) => (
-    <Notification {...args} />
-);
+const TemplateFull: ComponentStory<typeof Notification> = (args) => <Notification {...args} />;
 
 export const ExampleWithMessage = TemplateFull.bind({});
 ExampleWithMessage.args = {
@@ -53,6 +52,6 @@ ExampleWithActions.args = {
     actions: [
         <Button text="Something" key="b1" />,
         <Spacing size="tiny" vertical />,
-        <Button text="Important" hasStateDanger key="b2" />
-    ]
+        <Button text="Important" hasStateDanger key="b2" />,
+    ],
 };

package/src/components/Notification/Notification.tsx

@@ -1,16 +1,22 @@
 import React from "react";
 import {
-    Toast as BlueprintToast,
-    ToastProps as BlueprintToastProps,
     Classes as BlueprintClassNames,
+    Toast2 as BlueprintToast,
+    ToastProps as BlueprintToastProps,
 } from "@blueprintjs/core";
+
+import { ClassNames as IntentClassNames } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import {ClassNames as IntentClassNames} from "../../common/Intent";
+import { TestableComponent } from "../interfaces";
+
+import { ValidIconName } from "./../Icon/canonicalIconNames";
 import Icon, { IconProps } from "./../Icon/Icon";
 import { TestIconProps } from "./../Icon/TestIcon";
-import { ValidIconName } from "./../Icon/canonicalIconNames";
 
-export interface NotificationProps extends Omit<BlueprintToastProps, "message" | "action" | "icon" | "intent">, React.HTMLAttributes<HTMLDivElement> {
+export interface NotificationProps
+    extends TestableComponent,
+        Omit<BlueprintToastProps, "message" | "action" | "icon" | "intent">,
+        React.HTMLAttributes<HTMLDivElement> {
     /**
      * Extra user action elements
      */
@@ -61,6 +67,11 @@ export interface NotificationProps extends Omit<BlueprintToastProps, "message" |
      * Icon used as depiction that is displayed with the notification.
      */
     iconName?: ValidIconName | null;
+    /**
+     * If set then a `div` element is used as wrapper.
+     * It uses the attributes given via this property.
+     */
+    wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 
 /**
@@ -81,6 +92,9 @@ export const Notification = ({
     iconName = "state-info", // deprecated
     icon,
     timeout,
+    wrapperProps,
+    "data-test-id": dataTestId,
+    "data-testid": dataTestid,
     ...otherProps
 }: NotificationProps) => {
     let intentLevel: string = IntentClassNames.INFO;
@@ -119,7 +133,7 @@ export const Notification = ({
         children
     );
 
-    return (
+    const notification = (
         <BlueprintToast
             className={
                 `${eccgui}-notification ` +
@@ -132,16 +146,27 @@ export const Notification = ({
             message={content}
             timeout={timeout ? timeout : 0}
             icon={
-                !!notificationIcon ? React.cloneElement(
-                    notificationIcon as JSX.Element,
-                    {
-                        className: (notificationIcon.props.className??"") + ` ${BlueprintClassNames.ICON}`
-                    }
-                ) : undefined
+                notificationIcon
+                    ? React.cloneElement(notificationIcon as JSX.Element, {
+                          className: (notificationIcon.props.className ?? "") + ` ${BlueprintClassNames.ICON}`,
+                      })
+                    : undefined
             }
             {...otherProps}
         />
     );
-}
+
+    return wrapperProps || dataTestId || dataTestid ? (
+        <div
+            className={`${eccgui}-notification__wrapper`}
+            {...(wrapperProps ?? {})}
+            {...{ "data-test-id": dataTestId, "data-testid": dataTestid }}
+        >
+            {notification}
+        </div>
+    ) : (
+        <>{notification}</>
+    );
+};
 
 export default Notification;

package/src/components/Notification/Toast.tsx

@@ -1,8 +1,10 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import Notification, { NotificationProps } from "./Notification";
 
-export interface ToastProps extends NotificationProps {};
+export type ToastProps = NotificationProps;
 
 // FIXME: we need to check if we still need this component. It does not add a lot to `Notification`.
 

package/src/components/NumericInput/NumericInput.tsx

@@ -1,6 +1,6 @@
-import { NumericInput as BlueprintNumericInput } from "@blueprintjs/core";
 import { memo } from "react";
+import { NumericInput as BlueprintNumericInput } from "@blueprintjs/core";
 
 // @deprecated will be remove because beside the special arrow buttons it does not add any special. Could be done also with TextField + correct `type`.
-export const NumericInput = memo(BlueprintNumericInput)
+export const NumericInput = memo(BlueprintNumericInput);
 export default NumericInput;