@eccenca/gui-elements 23.0.0-rc.5 → 23.0.0-rc.7

package/src/components/Icon/canonicalIconNames.tsx

@@ -2,129 +2,128 @@ import * as icons from "@carbon/icons-react";
 
 /** Valid icon names. */
 export type ValidIconName =
+    | "application-activities"
     | "application-dataintegration"
+    | "application-explore"
     | "application-homepage"
-    | "application-useraccount"
-    | "application-warning"
+    | "application-legacygui"
     | "application-mapping"
-    | "application-explore"
-    | "application-vocabularies"
     | "application-queries"
-    | "application-legacygui"
-    | "application-activities"
-    | "module-timetracker"
-    | "module-accesscontrol"
-    | "module-annotation"
-    | "module-dashboard"
-    | "module-search"
-    | "module-visualization"
-    | "module-reports"
-    | "module-thesauri"
-    | "module-linkedrules"
-    | "module-integrations"
-    | "module-gdprsearch"
-    | "toggler-showmore"
-    | "toggler-showless"
-    | "toggler-moveright"
-    | "toggler-moveleft"
-    | "toggler-maximize"
-    | "toggler-minimize"
-    | "toggler-tree"
-    | "navigation-back"
-    | "navigation-forth"
-    | "navigation-close"
-    | "navigation-jump"
-    | "navigation-last"
-    | "navigation-previous"
-    | "navigation-next"
-    | "navigation-first"
-    | "item-moremenu"
-    | "item-vertmenu"
-    | "item-viewdetails"
+    | "application-useraccount"
+    | "application-vocabularies"
+    | "application-warning"
+    | "artefact-commit"
+    | "artefact-customtask"
+    | "artefact-dataset"
+    | "artefact-dataset-csv"
+    | "artefact-dataset-eccencadataplatform"
+    | "artefact-dataset-excel"
+    | "artefact-dataset-file"
+    | "artefact-dataset-jdbc"
+    | "artefact-dataset-json"
+    | "artefact-dataset-multicsv"
+    | "artefact-dataset-neo4j"
+    | "artefact-dataset-sparkview"
+    | "artefact-dataset-sparqlendpoint"
+    | "artefact-dataset-sqlendpoint"
+    | "artefact-dataset-xml"
+    | "artefact-deprecated"
+    | "artefact-embedded"
+    | "artefact-errorlog"
+    | "artefact-file"
+    | "artefact-linking"
+    | "artefact-project"
+    | "artefact-rawdata"
+    | "artefact-remote"
+    | "artefact-report"
+    | "artefact-task"
+    | "artefact-transform"
+    | "artefact-uncategorized"
+    | "artefact-workflow"
+    | "data-sourcepath"
+    | "data-targetpath"
+    | "item-add-artefact"
     | "item-clone"
+    | "item-comment"
+    | "item-copy"
+    | "item-download"
+    | "item-draggable"
     | "item-edit"
     | "item-evaluation"
     | "item-execution"
     | "item-info"
-    | "item-remove"
-    | "item-add-artefact"
     | "item-launch"
-    | "item-download"
-    | "item-upload"
+    | "item-moremenu"
     | "item-question"
-    | "item-comment"
-    | "item-copy"
-    | "item-save"
-    | "item-start"
-    | "item-stop"
     | "item-reload"
+    | "item-remove"
     | "item-reset"
-    | "item-shuffle"
-    | "item-draggable"
+    | "item-save"
     | "item-settings"
-    | "operation-search"
+    | "item-shuffle"
+    | "item-start"
+    | "item-stop"
+    | "item-upload"
+    | "item-vertmenu"
+    | "item-viewdetails"
+    | "list-sort"
+    | "list-sortasc"
+    | "list-sortdesc"
+    | "module-accesscontrol"
+    | "module-annotation"
+    | "module-dashboard"
+    | "module-gdprsearch"
+    | "module-integrations"
+    | "module-linkedrules"
+    | "module-reports"
+    | "module-search"
+    | "module-thesauri"
+    | "module-timetracker"
+    | "module-visualization"
+    | "navigation-back"
+    | "navigation-close"
+    | "navigation-first"
+    | "navigation-forth"
+    | "navigation-jump"
+    | "navigation-last"
+    | "navigation-next"
+    | "navigation-previous"
+    | "operation-aggregation"
+    | "operation-autolayout"
     | "operation-clear"
-    | "operation-undo"
-    | "operation-redo"
-    | "operation-logout"
+    | "operation-commit"
+    | "operation-comparison"
     | "operation-filter"
     | "operation-filteredit"
-    | "operation-comparison"
-    | "operation-transform"
-    | "operation-aggregation"
-    | "operation-commit"
+    | "operation-link"
+    | "operation-logout"
+    | "operation-redo"
+    | "operation-search"
     | "operation-sharelink"
-    | "data-sourcepath"
-    | "data-targetpath"
-    | "list-sort"
-    | "list-sortasc"
-    | "list-sortdesc"
-    | "state-info"
-    | "state-success"
-    | "state-warning"
-    | "state-danger"
-    | "state-unchecked"
+    | "operation-transform"
+    | "operation-undo"
+    | "operation-unlink"
     | "state-checked"
     | "state-checkedsimple"
-    | "state-partlychecked"
-    | "state-declined"
     | "state-confirmed"
-    | "artefact-project"
-    | "artefact-workflow"
-    | "artefact-dataset"
-    | "artefact-dataset-csv"
-    | "artefact-dataset-multicsv"
-    | "artefact-dataset-sparkview"
-    | "artefact-dataset-sqlendpoint"
-    | "artefact-dataset-jdbc"
-    | "artefact-dataset-xml"
-    | "artefact-dataset-json"
-    | "artefact-dataset-excel"
-    | "artefact-dataset-file"
-    | "artefact-dataset-eccencadataplatform"
-    | "artefact-dataset-sparqlendpoint"
-    | "artefact-dataset-neo4j"
-    | "artefact-transform"
-    | "artefact-linking"
-    | "artefact-task"
-    | "artefact-customtask"
-    | "artefact-file"
-    | "artefact-embedded"
-    | "artefact-remote"
-    | "artefact-deprecated"
-    | "artefact-uncategorized"
-    | "artefact-rawdata"
-    | "artefact-report"
-    | "artefact-commit"
-    | "activity-error-report"
-    | "select-caret"
-    | "linked-item"
-    | "operation-auto-graph-layout"
-    | "unlinked-item"
-    | "write-protected"
-    | "settings"
-    | "favorite-empty"
-    | "favorite-filled"
+    | "state-danger"
+    | "state-declined"
+    | "state-info"
+    | "state-partlychecked"
+    | "state-protected"
+    | "state-success"
+    | "state-unchecked"
+    | "state-warning"
+    | "toggler-caret"
+    | "toggler-maximize"
+    | "toggler-minimize"
+    | "toggler-moveleft"
+    | "toggler-moveright"
+    | "toggler-showless"
+    | "toggler-showmore"
+    | "toggler-star-empty"
+    | "toggler-star-filled"
+    | "toggler-tree"
     | "undefined"
     | "Undefined";
 
@@ -713,54 +712,49 @@ const canonicalIconNames: Record<ValidIconName, IconSized> = {
         large: icons.Commit32
     },
 
-    "activity-error-report": {
-        small: icons.Error16,
-        normal: icons.Error20,
-        large: icons.Error32,
+    "artefact-errorlog": {
+        // FIXME: we may check for a better icon
+        small: icons.WarningOther16,
+        normal: icons.WarningOther20,
+        large: icons.WarningOther32,
     },
 
-    "select-caret": {
+    "toggler-caret": {
         small: icons.CaretSort16,
         normal: icons.CaretSort20,
         large: icons.CaretSort32,
     },
 
-    "linked-item": {
+    "operation-link": {
         small: icons.Link16,
         normal: icons.Link20,
         large: icons.Link32,
     },
-    "unlinked-item": {
+    "operation-unlink": {
         small: icons.Unlink16,
         normal: icons.Unlink20,
         large: icons.Unlink32,
     },
 
-    "operation-auto-graph-layout": {
+    "operation-autolayout": {
         small: icons.ChartNetwork16,
         normal: icons.ChartNetwork20,
         large: icons.ChartNetwork32,
     },
 
-    "write-protected": {
+    "state-protected": {
         small: icons.DocumentProtected16,
         normal: icons.DocumentProtected20,
         large: icons.DocumentProtected32,
     },
 
-    "settings": {
-        small: icons.Settings16,
-        normal: icons.Settings20,
-        large: icons.Settings32
-    },
-
-    "favorite-empty": {
+    "toggler-star-empty": {
         small: icons.Star16,
         normal: icons.Star20,
         large: icons.Star32
     },
 
-    "favorite-filled": {
+    "toggler-star-filled": {
         small: icons.StarFilled16,
         normal: icons.StarFilled20,
         large: icons.StarFilled32

package/src/components/Label/Label.stories.tsx

@@ -7,7 +7,7 @@ import {
 } from "../../index";
 
 export default {
-  title: "Components/Label",
+  title: "Forms/Label",
   component: Label,
   argTypes: {
   },

package/src/components/Menu/Menu.tsx

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

package/src/components/Menu/MenuDivider.tsx

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

package/src/components/Menu/MenuItem.tsx

@@ -5,22 +5,25 @@ import Icon from '../Icon/Icon';
 import { openInNewTab } from '../../common/utils/openInNewTab';
 import {ValidIconName} from "../Icon/canonicalIconNames";
 
-export interface MenuItemProps extends Omit<BlueprintMenuItemProps, "icon">, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target"> {
+export interface MenuItemProps extends Omit<BlueprintMenuItemProps, "icon" | "children">, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "children"> {
     /*
      * If set the icon is diplayed on the left side of the menu item.
      */
     icon?: ValidIconName | string[];
+    children?: React.ReactNode
 }
 
-/** A single item in a Menu. */
+/**
+ * Single item, used as child inside `Menu`.
+ */
 function MenuItem({
-                      children,
-                      className = '',
-                      icon,
-                      onClick,
-                      href,
-                      ...restProps
-                  }: MenuItemProps) {
+    children,
+    className = "",
+    icon,
+    onClick,
+    href,
+    ...restProps
+}: MenuItemProps) {
     return (
         <BlueprintMenuItem
             {...restProps}
@@ -31,7 +34,7 @@ function MenuItem({
                 icon ? <Icon name={icon} /> : false
             }
         >
-            {children}
+            {children ?? null}
         </BlueprintMenuItem>
     );
 }

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

@@ -0,0 +1,31 @@
+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';
+
+export default {
+    title: "Components/Menu",
+    component: Menu,
+    subcomponents: {MenuItem, MenuDivider},
+    argTypes: {
+        children: {
+            control: "none",
+        },
+    }
+} as ComponentMeta<typeof Menu>
+
+const MenuExample: ComponentStory<typeof Menu> = (args) => (
+    <Menu style={{width: "200px"}} {...args} />
+);
+
+export const Default  = MenuExample.bind({});
+Default.args = {
+    children : (
+        <>
+            {ContentMenuStory.args.children}
+            <MenuDivider title ="Second menu part"/>
+            <MenuItem {...MenuItemStory.args} selected />
+        </>
+    ),
+};

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Menu, MenuItem } from "../../../../index";
+export default {
+    title: "Components/Menu/MenuItem",
+    component: MenuItem,
+    argTypes: {
+    }
+} as ComponentMeta<typeof MenuItem>
+
+const MenuExample: ComponentStory<typeof MenuItem> = (args) => (
+    <Menu style={{width: "200px"}}><MenuItem {...args} /></Menu>
+);
+
+export const Default  = MenuExample.bind({});
+Default.args = {
+    children: (
+        <>
+        <MenuItem key="m6" text={"Sub option 1"} />
+        <MenuItem key="m6" text={"Sub option 2"} />
+        </>
+    ),
+    text: "Parent option",
+    key: "m4"
+};

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

@@ -1,32 +1,13 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { loremIpsum } from "react-lorem-ipsum";
-
-import MultiSelectExample from "./MultiSelect";
+import { MultiSelect as MultiSelectExample } from "./../../../index";
 
 export default {
-    title: "Components/MultiSelect",
+    title: "Forms/MultiSelect",
     component: MultiSelectExample,
     argTypes: {
-        placeholder: {
-            description: "Input placeholder text",
-            control: "text",
-            table: {
-                type: { summary: "string" },
-            },
-        },
-        openOnKeyDown: {
-            description:
-                "If true, the component waits until a keydown event in the TagInput before opening its popover. If false, the popover opens immediately after a mouse click focuses the component's TagInput ",
-            control: "boolean",
-            defaultValue: false,
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: false },
-            },
-        },
         items: {
-            description: "Array of items in the list",
             control: "none",
         },
     },

package/src/components/MultiSelect/MultiSelect.tsx

@@ -126,6 +126,7 @@ function MultiSelect<T>({
     ...otherProps
 }: IProps<T>) {
     const [createdItems, setCreatedItems] = React.useState<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] : []));
@@ -165,14 +166,14 @@ function MultiSelect<T>({
         onSelection &&
             onSelection({
                 newlySelected: selectedItems.slice(-1)[0],
-                createdItems,
+                createdItems: createdSelectedItems,
                 selectedItems,
             });
         /* eslint-disable react-hooks/exhaustive-deps */
     }, [
         onSelection,
         selectedItems.map((item) => itemId(item)).join("|"),
-        createdItems.map((item) => itemId(item)).join("|"),
+        createdSelectedItems.map((item) => itemId(item)).join("|"),
     ]);
 
     /**
@@ -192,18 +193,34 @@ 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 {
             setSelectedItems((items) => [...items, item]);
         }
-        inputRef.current?.select()
+        
+        //remove if already exist
+        if (createdSelectedItems.find((t) => itemLabel(t) === itemLabel(item))) {
+           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])
+            }
+        }
+ 
+        inputRef.current?.select();
     };
 
     /**
@@ -266,7 +283,7 @@ function MultiSelect<T>({
      */
     const removeTagFromSelectionViaIndex = (label: React.ReactNode, index: number) => {
         setSelectedItems([...selectedItems.slice(0, index), ...selectedItems.slice(index + 1)]);
-        setCreatedItems(items => items.filter(item => itemLabel(item) !== label));
+        setCreatedSelectedItems(items => items.filter(item => itemLabel(item) !== label));
     };
 
     /**
@@ -276,8 +293,8 @@ function MultiSelect<T>({
         const newItem = createNewItemFromQuery!!(query);
         //set new items
         setCreatedItems((items) => [...items, newItem]);
+        setCreatedSelectedItems((items) => [...items, newItem])
         setQuery("");
-        itemsCopy.push(newItem);
         return newItem;
     };
 

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

@@ -1,40 +1,12 @@
 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";
+import { Notification, HtmlContentBlock, Button, Spacing} from "../../../index";
 
 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",
         },

package/src/components/Pagination/Pagination.tsx

@@ -1,22 +1,29 @@
 import React, { useState } from "react";
-import {Pagination as CarbonPagination, PaginationProps as CarbonPaginationProps} from "carbon-components-react";
+import {
+    Pagination as CarbonPagination,
+    PaginationProps as CarbonPaginationProps,
+} from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface PaginationProps extends CarbonPaginationProps {
+export interface PaginationProps extends CarbonPaginationProps {
     /**
-     Hide the select option to set how many items per page are displayed.
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Hide dropdown to select how many items will be shown per page.
      */
     hidePageSizeConfiguration?: boolean;
     /**
-     Hide info about the item numbers that are currently displayed.
+     * Hide info block about the section of the displayed items.
      */
     hideInfoText?: boolean;
     /**
-     Hide select box to switch between pages.
+     * Hide dropdown to select page number directly.
      */
     hidePageSelect?: boolean;
     /**
-     Hide buttons to switch beteen nex/prev pages.
+     * Hide prev/next arrows to navigate through the pages.
      */
     hideNavigationArrows?: boolean;
 }