@eccenca/gui-elements 23.0.0-rc.4 → 23.0.0-rc.6

package/src/cmem/markdown/Markdown.stories.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Markdown } from "./../../../index";
+
+export default {
+    title: "Cmem/Markdown",
+    component: Markdown,
+    argTypes: {
+    },
+} as ComponentMeta<typeof Markdown>;
+
+const Template: ComponentStory<typeof Markdown> = (args) => <Markdown {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+    children: `
+# This is a headline level 1
+
+This is a paragraph.
+
+* this is a unordered list
+    * with sub items
+    * with sub items
+       * another level
+       * another level
+    * sub item
+* other list item
+* a last one
+
+1. ordered list
+    1. ordered sub items
+    2. second line
+2. second item
+    * unordered sub items
+    * another line
+3. third item
+
+This is a paragraph with a [text link](http://example.com/).
+
+## Headline level 2
+### Headline level 3
+#### Headline level 4
+##### Headline level 5
+###### Headline level 6
+
+    This is a code block.
+
+> This is a block quote.
+>
+> With 2 paragraphs.
+
+A line with some <strong>HTML code</strong> inside.
+    `
+};

package/src/cmem/markdown/Markdown.tsx

@@ -10,15 +10,26 @@ import { PluggableList } from "react-markdown/lib/react-markdown";
 
 export interface MarkdownParserProps {
     children: string;
-    // allow HTML as partial content, otherwise escape HTML tags (pls use with caution)
+    /**
+     * Allow HTML as partial content, otherwise escape HTML tags.
+     * Use with caution!
+     */
     allowHtml?: boolean;
-    // return an object that only contains simple text without any HTML
+    /**
+     * Return an object that only contains simple text without any HTML.
+     */
     removeMarkup?: boolean;
-    // If defined, only elements from this list will be rendered. This overwrites the removeMarkup parameter if both are set.
+    /**
+     * If defined, only elements from this list will be rendered.
+     * This overwrites the removeMarkup parameter if both are set.
+     */
     allowedElements?: string[];
-    // do not wrap it in a content block element
+    /**
+     * Do not wrap it in a content block element.
+     */
     inheritBlock?: boolean;
-    /** Additional reHype plugins to execute.
+    /**
+     * Additional reHype plugins to execute.
      * @see https://github.com/remarkjs/react-markdown#architecture
      */
     reHypePlugins?: PluggableList;

package/src/cmem/react-flow/nodes/_stickynote.scss

@@ -17,7 +17,7 @@
             .#{$eccgui}-graphviz__node__content {
                 color: currentColor;
                 background: transparent;
-                padding: $eccgui-size-block-whitespace / 2;
+                padding: $eccgui-size-block-whitespace * 0.5;
             }
         }
     }

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -79,6 +79,7 @@ export const AutoSuggestionList = ({
     left,
     currentlyFocusedIndex,
     itemToHighlight,
+    style,
     ...otherDivProps
 }: IDropdownProps) => {
     const [hoveredItem, setHoveredItem] = React.useState<
@@ -136,7 +137,7 @@ export const AutoSuggestionList = ({
         <div
             {...otherDivProps}
             className={`${eccgui}-autosuggestion__dropdown`}
-            style={{ left }}
+            style={{ ...style, left }}
             ref={dropdownRef}
         >
             {loading ? (

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -128,6 +128,9 @@ export interface IAutoCompleteFieldProps<T extends any, UPDATE_VALUE extends any
         showNewItemOptionFirst?: boolean
     };
 
+    /** Dropdown is only rendered when the query has a value (input field is not empty). */
+    onlyDropdownWithQuery?: boolean;
+
     /** If true the input field will be disabled. */
     disabled?: boolean;
 
@@ -149,17 +152,15 @@ AutoCompleteField.defaultProps = {
 
 /** Style object to be used in menu option items. */
 export interface IElementWidth {
-    width: string
+    minWidth: string;
+    //width: string
     maxWidth: string
 }
 
 /** Hook that returns the element width of the given ref.*/
 const elementWidth = (elRef: IRefObject<HTMLInputElement> | null): IElementWidth => {
-    if(elRef && elRef.current) {
-        return { width: elRef.current.offsetWidth + "px", maxWidth: "90vw" }
-    } else {
-        return { width: "40rem", maxWidth: "90vw" }
-    }
+    const minWidth = (elRef && elRef.current) ? elRef.current.offsetWidth + "px" : "20rem";
+    return { minWidth, maxWidth: "90vw" };
 }
 
 /** Auto-complete input widget. */
@@ -168,6 +169,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         reset,
         noResultText,
         disabled,
+        onlyDropdownWithQuery = false,
         itemValueSelector,
         itemRenderer,
         onSearch,
@@ -194,6 +196,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     const [filtered, setFiltered] = useState<T[]>([]);
 
     const BlueprintSuggestAutocomplete = Suggest.ofType<T>();
+    const readOnly = !!otherProps.inputProps?.readOnly
 
     // Sets the query to the item value if it has a valid string value
     const setQueryToSelectedValue = (item?: T) => {
@@ -223,7 +226,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     );
 
     useEffect(() => {
-        if (!disabled && !otherProps.inputProps?.readOnly && hasFocus) {
+        if (!disabled && !readOnly && hasFocus) {
             setListLoading(true);
             const timeout: number = window.setTimeout(async () => {
                 fetchQueryResults(query);
@@ -351,7 +354,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         return <Notification danger={true} message={requestError} />
     }
     // Optional clear button to reset the selected value
-    const clearButton = !disabled && reset &&
+    const clearButton = !readOnly && !disabled && reset &&
         selectedItem != null &&
         reset.resettableValue(selectedItem) ? (
             <IconButton
@@ -370,9 +373,9 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         onBlur: handleOnFocusOut,
         onFocus: handleOnFocusIn,
         ...otherProps.inputProps,
-        title: (selectedItem !== undefined && (!!otherProps.inputProps?.readOnly || disabled)) ? itemValueString(selectedItem) : otherProps.inputProps?.title,
+        title: (selectedItem !== undefined && (readOnly || disabled)) ? itemValueString(selectedItem) : otherProps.inputProps?.title,
     };
-    const preventOverlayOnReadonly = !!otherProps.inputProps?.readOnly ? { isOpen: false } : {}
+    const preventOverlayOnReadonly = readOnly ? { isOpen: false } : {}
     const updatedContextOverlayProps: Partial<Omit<ContextOverlayProps, "content" | "children">> = {
         minimal: true,
         placement: "bottom-start",
@@ -407,6 +410,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
                 disabled={disabled}
                 // Need to display error messages in list
                 items={requestError ? [requestError as T] : filtered}
+                initialContent={onlyDropdownWithQuery ? null : undefined}
                 inputValueRenderer={selectedItem !== undefined ? itemValueRenderer : () => ""}
                 itemRenderer={requestError ? requestErrorRenderer : optionRenderer}
                 itemsEqual={areEqualItems}

package/src/components/AutocompleteField/autocompletefield.scss

@@ -1,5 +1,5 @@
 .#{$eccgui}-autocompletefield__options {
-    .#{$ns}-select-popover {
+    .#{$ns}-popover2-content {
         .#{$ns}-menu {
             max-height: 45vh;
             overflow: auto;

package/src/components/Icon/canonicalIconNames.tsx

@@ -2,127 +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-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"
-    | "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";
 
@@ -374,6 +375,11 @@ const canonicalIconNames: Record<ValidIconName, IconSized> = {
         normal: icons.Download20,
         large: icons.Download32,
     },
+    "item-upload": {
+        small: icons.Upload16,
+        normal: icons.Upload20,
+        large: icons.Upload32,
+    },
     "item-question": {
         small: icons.Help16,
         normal: icons.Help20,
@@ -700,55 +706,55 @@ const canonicalIconNames: Record<ValidIconName, IconSized> = {
         normal: icons.Report20,
         large: icons.Report32,
     },
+    "artefact-commit": {
+        small: icons.Commit16,
+        normal: icons.Commit20,
+        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/InteractionGate/InteractionGate.tsx

@@ -19,6 +19,11 @@ export interface InteractionGateProps extends Omit<React.HTMLAttributes<HTMLDivE
      * Configure the included `<Spinner />` element.
      */
     spinnerProps?: SpinnerProps;
+    /**
+     * Do not use own wrapper element to set the position of the spinner element, if used.
+     * Use the positioning of the parent container.
+     */
+    useParentPositioning?: boolean;
 }
 
 /**
@@ -31,6 +36,7 @@ function InteractionGate({
     inert = false,
     showSpinner = false,
     spinnerProps = {},
+    useParentPositioning = false,
     ...otherProps
 }: InteractionGateProps) {
     const domRef = useRef<HTMLDivElement>(null);
@@ -45,7 +51,12 @@ function InteractionGate({
     }, [inert]);
 
     return (
-        <div className={`${eccgui}-interactiongate__wrapper`}>
+        <div
+            className={
+                `${eccgui}-interactiongate__wrapper` +
+                (useParentPositioning ? ` ${eccgui}-interactiongate__wrapper--tunnelpositioning` : "")
+            }
+        >
             <div
                 ref={domRef}
                 className={

package/src/components/InteractionGate/interactiongate.scss

@@ -1,4 +1,4 @@
-.#{eccgui}-interactiongate__wrapper {
+.#{eccgui}-interactiongate__wrapper:not(.#{eccgui}-interactiongate__wrapper--tunnelpositioning) {
     position: relative;
 }
 

package/src/components/Tabs/TabPanel.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Classes } from "@blueprintjs/core";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Addicional CSS class name.
+     */
+    className?: string,
+    /**
+     * `id` of the tab element that is connected to this panel content.
+     */
+    labelledBy?: string,
+    /**
+     * Tab panel is not displayed.
+     */
+    hidden?: boolean,
+}
+
+/**
+ * Element to display the content related to a tab.
+ * This could be used if `<Tabs />` is used in uncontrolled mode.
+ */
+function TabPanel({
+    children,
+    className = "",
+    labelledBy,
+    hidden = false,
+    ...otherDivProps
+}: TabPanelProps) {
+    return (
+        <div
+            {...otherDivProps}
+            className={`${Classes.TAB_PANEL} ${eccgui}-tab__panel ${className}`}
+            aria-labelledby={labelledBy}
+            aria-hidden={hidden}
+        >
+            { children }
+        </div>
+    )
+}
+
+export default TabPanel;

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+import { TabPanel } from "./../../../";
+
+export default {
+    title: "Components/Tabs",
+    component: TabPanel,
+    argTypes: {
+    },
+} as ComponentMeta<typeof TabPanel>;
+
+const TemplateFull: ComponentStory<typeof TabPanel> = (args) => (
+    <TabPanel {...args} />
+);
+
+export const TabPanelElement = TemplateFull.bind({});
+TabPanelElement.args = {
+    children: <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />,
+    hidden: false
+};

package/src/components/Tabs/tabs.scss

@@ -63,10 +63,6 @@ $tab-indicator-width: 3px !default;
     }
 }
 
-.#{$ns}-tab-indicator-wrapper {
-    //top: $tab-indicator-width;
-}
-
-.#{$ns}-tab-panel {
+.#{$eccgui}-tab__panel, .#{$ns}-tab-panel {
     margin-top: $eccgui-size-block-whitespace;
 }

package/src/components/TextField/TextField.tsx

@@ -69,7 +69,7 @@ function TextField({
       break;
   }
 
-  if ((!!otherProps.readOnly || !!otherProps.disabled) && !!otherProps.value && !otherProps.title) {
+  if ((otherProps.readOnly || otherProps.disabled) && !!otherProps.value && !otherProps.title) {
       otherProps["title"] = otherProps.value;
   }
 

package/src/components/Tooltip/tooltip.scss

@@ -29,6 +29,10 @@ $tooltip2-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
     max-width: $eccgui-size-tooltip-width * 2;
 }
 
+.#{$eccgui}-tooltip__wrapper:not(.#{$ns}-tooltip2-indicator) {
+    cursor: inherit;
+}
+
 .#{$eccgui}-tooltip__content {
     a {
         color: inherit;