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

package/dist/esm/extensions/react-flow/minimap/MiniMap.js

@@ -30,7 +30,8 @@ var minimapCalcConf = {
 };
 /** An improved mini-map for react-flow that supports navigation via the mini-map. */
 export var MiniMap = memo(function (_a) {
-    var flowInstance = _a.flowInstance, _b = _a.enableNavigation, enableNavigation = _b === void 0 ? false : _b, _c = _a.maskColor, maskColor = _c === void 0 ? "#ddddddbb" : _c, _d = _a.nodeClassName, nodeClassName = _d === void 0 ? miniMapUtils.nodeClassName : _d, _e = _a.nodeColor, nodeColor = _e === void 0 ? miniMapUtils.nodeColor : _e, _f = _a.nodeStrokeColor, nodeStrokeColor = _f === void 0 ? miniMapUtils.borderColor : _f, minimapProps = __rest(_a, ["flowInstance", "enableNavigation", "maskColor", "nodeClassName", "nodeColor", "nodeStrokeColor"]);
+    var _b;
+    var flowInstance = _a.flowInstance, _c = _a.enableNavigation, enableNavigation = _c === void 0 ? false : _c, _d = _a.maskColor, maskColor = _d === void 0 ? "#ddddddbb" : _d, _e = _a.nodeClassName, nodeClassName = _e === void 0 ? miniMapUtils.nodeClassName : _e, _f = _a.nodeColor, nodeColor = _f === void 0 ? miniMapUtils.nodeColor : _f, _g = _a.nodeStrokeColor, nodeStrokeColor = _g === void 0 ? miniMapUtils.borderColor : _g, wrapperProps = _a.wrapperProps, minimapProps = __rest(_a, ["flowInstance", "enableNavigation", "maskColor", "nodeClassName", "nodeColor", "nodeStrokeColor", "wrapperProps"]);
     var minimapWrapper = React.useRef(null);
     useEffect(function () {
         var minimapDiv = minimapWrapper.current;
@@ -78,22 +79,19 @@ export var MiniMap = memo(function (_a) {
             flowInstance.setTransform(canvasNewState);
         }
     };
-    /**
-    sets the view for the user when clicked and finish navigation
- **/
+    // sets the view for the user when clicked and finish navigation
     var handleMiniMapMouseUp = function (event) {
         handleMiniMapMouseMove(event);
         minimapCalcConf.navigationOn = false;
     };
-    /**
-    enables the mini-map fake drag effect see "handleMiniMapMouseMove" above.
- **/
+    // enables the mini-map fake drag effect see "handleMiniMapMouseMove" above.
     var handleMiniMapMouseDown = function () {
         if (enableNavigation && flowInstance) {
             minimapCalcConf.navigationOn = true;
         }
     };
-    return (React.createElement("div", { ref: minimapWrapper, onMouseDown: handleMiniMapMouseDown, onMouseUp: handleMiniMapMouseUp, onMouseMove: handleMiniMapMouseMove, onMouseLeave: handleMiniMapMouseUp, style: flowInstance ? { cursor: "grab" } : {} },
+    return (React.createElement("div", __assign({ ref: minimapWrapper, onMouseDown: handleMiniMapMouseDown, onMouseUp: handleMiniMapMouseUp, onMouseMove: handleMiniMapMouseMove, onMouseLeave: handleMiniMapMouseUp }, wrapperProps, { style: flowInstance && enableNavigation
+            ? __assign(__assign({}, ((_b = wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style) !== null && _b !== void 0 ? _b : {})), { cursor: "grab" }) : wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style }),
         React.createElement(ReactFlowMiniMap, __assign({ maskColor: maskColor, nodeClassName: nodeClassName, nodeColor: nodeColor, nodeStrokeColor: nodeStrokeColor }, minimapProps))));
 });
 //# sourceMappingURL=MiniMap.js.map

package/dist/esm/extensions/react-flow/minimap/MiniMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiniMap.js","sourceRoot":"","sources":["../../../../../src/extensions/react-flow/minimap/MiniMap.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MiniMap.js","sourceRoot":"","sources":["../../../../../src/extensions/react-flow/minimap/MiniMap.tsx"],"names":[],"mappings":"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"}

package/dist/types/cmem/react-flow/StickyNoteModal/StickyNoteModal.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { SimpleDialogProps } from "./../../../index";
 export declare type StickyNoteModalTranslationKeys = "modalTitle" | "noteLabel" | "colorLabel" | "saveButton" | "cancelButton";
 export declare type StickyNoteMetadataType = {
     note: string;
@@ -22,5 +23,9 @@ export interface StickyNoteModalProps {
      * translation utility for language compatibility
      */
     translate: (key: StickyNoteModalTranslationKeys) => string;
+    /**
+     * Forward other properties to the `SimpleModal` element that is used for this dialog.
+     */
+    simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions">;
 }
 export declare const StickyNoteModal: React.FC<StickyNoteModalProps>;

package/dist/types/cmem/react-flow/configuration/graph.d.ts

@@ -1,15 +1,15 @@
 /// <reference types="react" />
 import { GRAPH_NODE_TYPES } from "./typing";
 declare const edgeTypes: {
-    default: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    implicit: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    import: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    subclass: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    subproperty: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    rdftype: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    success: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    warning: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    danger: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    default: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    implicit: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    import: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    subclass: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    subproperty: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    rdftype: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    success: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    warning: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    danger: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
 };
 declare const nodeTypes: Record<GRAPH_NODE_TYPES, React.ReactNode>;
 export { edgeTypes, nodeTypes };

package/dist/types/cmem/react-flow/configuration/unspecified.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const edgeTypes: {
-    default: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    straight: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    default: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    straight: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
     step: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeStep").EdgeStepProps) => import("react").JSX.Element>;
 };
 export declare const nodeTypes: {

package/dist/types/common/index.d.ts

@@ -21,6 +21,7 @@ export declare const utils: {
     };
     getGlobalVar: (varname: string) => Window;
     setGlobalVar: (varname: string, value: any) => any;
+    getScrollParent: (element: Element) => false | HTMLElement;
 };
 export declare const Utilities: {
     openInNewTab: (event: import("react").MouseEvent<HTMLAnchorElement, MouseEvent>, handler?: ((e: import("react").MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined, url?: string | undefined) => void;
@@ -44,4 +45,5 @@ export declare const Utilities: {
     };
     getGlobalVar: (varname: string) => Window;
     setGlobalVar: (varname: string, value: any) => any;
+    getScrollParent: (element: Element) => false | HTMLElement;
 };

package/dist/types/common/utils/getScrollParent.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Find the scroll parent of an element, returns `false` if it cannot be found.
+ * In case of a `false` return the very probably `document.documentElement` is the parent.
+ * In this case `window` object should be used for scroll event listeners.
+ * See `src/components/Sticky/StickyTarget.tsx` for an usage example.
+ * @param element
+ * @returns HTMLElement | false
+ */
+export declare const getScrollParent: (element: Element) => HTMLElement | false;

package/dist/types/components/AutocompleteField/AutoCompleteField.d.ts

@@ -109,6 +109,8 @@ export interface AutoCompleteFieldProps<T, UPDATE_VALUE> {
      * Use the full available width of the parent container.
      */
     fill?: boolean;
+    /** Utility that fetches more options when clicked*/
+    loadMoreResults?: () => Promise<T[]>;
 }
 export declare type IAutoCompleteFieldProps<T, UPDATE_VALUE> = AutoCompleteFieldProps<T, UPDATE_VALUE>;
 /**

package/dist/types/components/MultiSelect/MultiSelect.d.ts

@@ -4,7 +4,7 @@ import { MultiSelect as BlueprintMultiSelect, MultiSelectProps as BlueprintMulti
 import { TestableComponent } from "../interfaces";
 import { ContextOverlayProps } from "./../../index";
 export interface MultiSelectSelectionProps<T> {
-    newlySelected: T;
+    newlySelected?: T;
     selectedItems: T[];
     createdItems: Partial<T>[];
 }

package/dist/types/components/Sticky/StickyTarget.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+export interface StickyTargetProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Set the side the element need to be sticky on.
+     */
+    to?: "top" | "bottom";
+    /**
+     * The sticky area is positioned relatively to a local scroll area.
+     * The application header is not taken into offset calculation
+     */
+    local?: boolean;
+    /**
+     * Set the background color used for the sticky area.
+     * As it can overlay other content readability could be harmed if the overlayed content is shining through.
+     */
+    background?: "card" | "application" | "transparent";
+    /**
+     * Set additional distance to original sticky position.
+     */
+    offset?: `${number}${string}`;
+    /**
+     * Callback that returns an DOM element.
+     * The position of `StickyTarget` is then calculated relative to that element.
+     */
+    getConnectedElement?: (ref: React.MutableRefObject<HTMLDivElement | null>) => Element | false;
+}
+/**
+ * Element wraps the content that need to be displayed sticky.
+ * The content then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor).
+ */
+export declare const StickyTarget: ({ className, to, local, background, offset, style, getConnectedElement, ...otherDivProps }: StickyTargetProps) => React.JSX.Element;
+export default StickyTarget;

package/dist/types/components/Sticky/index.d.ts

@@ -0,0 +1 @@
+export * from "./StickyTarget";

package/dist/types/components/index.d.ts

@@ -36,6 +36,7 @@ export * from "./Separation/Divider";
 export * from "./Separation/Spacing";
 export * from "./Skeleton/Skeleton";
 export * from "./Spinner/Spinner";
+export * from "./Sticky";
 export * from "./Structure";
 export * from "./Switch/Switch";
 export * from "./Table";

package/dist/types/extensions/react-flow/edges/EdgeDefault.d.ts

@@ -28,6 +28,11 @@ export interface EdgeDefaultDataProps {
      * Callback handler that returns a React element used as edge title.
      */
     renderLabel?: (edgeCenter: [number, number, number, number]) => React.ReactNode;
+    /**
+     * Properties are forwarded to the internally used SVG `g` element.
+     * Data attributes for test ids coud be included here.
+     */
+    edgeSvgProps?: React.SVGProps<SVGGElement>;
 }
 export interface EdgeDefaultProps extends ReactFlowEdgeProps {
     /**
@@ -39,7 +44,7 @@ export interface EdgeDefaultProps extends ReactFlowEdgeProps {
      */
     drawSvgPath?: (edge: ReactFlowEdgeProps) => string;
 }
-export declare const EdgeDefault: React.MemoExoticComponent<(edge: EdgeDefaultProps) => React.JSX.Element>;
+export declare const EdgeDefault: React.MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: EdgeDefaultProps) => React.JSX.Element>;
 export declare const edgeDefaultUtils: {
     createEdgeDefaultClassName: ({ strokeType, intent, highlightColor }: EdgeDefaultDataProps, baseClass?: string) => string;
     drawEdgeStep: ({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, data, }: import("./EdgeStep").EdgeStepProps) => string;

package/dist/types/extensions/react-flow/edges/EdgeLabel.d.ts

@@ -33,7 +33,7 @@ export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     intent?: IntentTypes;
 }
-export declare const EdgeLabel: React.MemoExoticComponent<({ depiction, text, actions, large, fullWidth, loose, intent, title, ...otherDivProps }: EdgeLabelProps) => React.JSX.Element>;
+export declare const EdgeLabel: React.MemoExoticComponent<({ depiction, text, actions, large, fullWidth, loose, intent, title, className, ...otherDivProps }: EdgeLabelProps) => React.JSX.Element>;
 export interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObjectElement> {
     /**
      * The `<EdgeLabel />` element that need to be displayed.

package/dist/types/extensions/react-flow/edges/edgeTypes.d.ts

@@ -1,16 +1,16 @@
 /// <reference types="react" />
 export declare const edgeTypes: {
-    default: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    straight: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    default: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    straight: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
     step: import("react").MemoExoticComponent<(edge: import("./EdgeStep").EdgeStepProps) => import("react").JSX.Element>;
-    success: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    warning: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    danger: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    implicit: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    import: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    subclass: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    subproperty: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    rdftype: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    success: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    warning: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    danger: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    implicit: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    import: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    subclass: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    subproperty: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    rdftype: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
     value: import("react").MemoExoticComponent<(edge: import("./EdgeStep").EdgeStepProps) => import("react").JSX.Element>;
     score: import("react").MemoExoticComponent<(edge: import("./EdgeStep").EdgeStepProps) => import("react").JSX.Element>;
 };

package/dist/types/extensions/react-flow/handles/HandleContent.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import { TooltipProps } from "../../../index";
-export interface HandleContentProps {
-    children?: JSX.Element | string;
+export interface HandleContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     /**
      * Tooltip displayed as overlay on hover.
      */
@@ -11,4 +10,4 @@ export interface HandleContentProps {
      */
     tooltipProps?: Omit<TooltipProps, "content" | "children" | "renderTarget">;
 }
-export declare const HandleContent: React.MemoExoticComponent<({ children, extendedTooltip, tooltipProps }: HandleContentProps) => React.JSX.Element>;
+export declare const HandleContent: React.MemoExoticComponent<({ children, extendedTooltip, tooltipProps, ...otherDivProps }: HandleContentProps) => React.JSX.Element>;

package/dist/types/extensions/react-flow/minimap/MiniMap.d.ts

@@ -1,8 +1,19 @@
 import React from "react";
 import { MiniMapProps as ReactFlowMiniMapProps, OnLoadParams } from "react-flow-renderer";
 export interface MiniMapProps extends ReactFlowMiniMapProps {
+    /**
+     * React-Flow instance
+     */
     flowInstance?: OnLoadParams;
+    /**
+     * Enable navigating the react-flow canvas by dragging and clicking on the mini-map.
+     */
     enableNavigation?: boolean;
+    /**
+     * Properties are forwarded to the HTML `div` element used as minimap wrapper.
+     * Data attributes for test ids coud be included here.
+     */
+    wrapperProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "onMouseDown" | "onMouseUp" | "onMouseMove" | "onMouseLeave">;
 }
 /** An improved mini-map for react-flow that supports navigation via the mini-map. */
-export declare const MiniMap: React.MemoExoticComponent<({ flowInstance, enableNavigation, maskColor, nodeClassName, nodeColor, nodeStrokeColor, ...minimapProps }: MiniMapProps) => React.JSX.Element>;
+export declare const MiniMap: React.MemoExoticComponent<({ flowInstance, enableNavigation, maskColor, nodeClassName, nodeColor, nodeStrokeColor, wrapperProps, ...minimapProps }: MiniMapProps) => React.JSX.Element>;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "23.6.0",
+    "version": "23.7.0-rc.1",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -85,6 +85,7 @@
         "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
         "react-inlinesvg": "^3.0.3",
         "react-markdown": "^8.0.7",
+        "react-syntax-highlighter": "15.5.0",
         "rehype-raw": "^6.1.1",
         "remark-definition-list": "^1.2.0",
         "remark-gfm": "^3.0.1",
@@ -117,6 +118,7 @@
         "@types/color": "^3.0.6",
         "@types/jest": "^29.5.12",
         "@types/lodash": "^4.14.202",
+        "@types/react-syntax-highlighter": "15.5.11",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
         "babel-jest": "^29.7.0",

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { Blockquote } from "@blueprintjs/core";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 
 import { Markdown } from "./../../../index";
@@ -44,11 +45,17 @@ This is a paragraph with a [text link](http://example.com/) and a footnote refer
 ##### Headline level 5
 ###### Headline level 6
 
-    This is a code block.
+    This is a code block. 
+
+\`\`\`
+another code block
+{{templateVar}}
+\`\`\`
 
 > This is a block quote.
 >
 > With 2 paragraphs.
+> And some code like \`{{showThisNotItsValue}}\`
 
 A line with some <strong>HTML code</strong> inside.
 

package/src/cmem/markdown/Markdown.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
 import { PluggableList } from "react-markdown/lib/react-markdown";
-//@ts-ignore
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { materialLight } from "react-syntax-highlighter/dist/esm/styles/prism";
+// @ts-expect-error: No declaration file for module
 import remarkTypograf from "@mavrin/remark-typograf";
 import rehypeRaw from "rehype-raw";
 import { remarkDefinitionList } from "remark-definition-list";
@@ -132,6 +134,25 @@ export const Markdown = ({
                   return linkTarget as React.HTMLAttributeAnchorTarget;
               }
             : undefined,
+        components: {
+            code(props: any) {
+                const { children, className, node, ...rest } = props;
+                const match = /language-(\w+)/.exec(className || "");
+                return match ? (
+                    <SyntaxHighlighter
+                        {...rest}
+                        PreTag="div"
+                        children={String(children).replace(/\n$/, "")}
+                        language={match[1]}
+                        style={materialLight}
+                    />
+                ) : (
+                    <code {...rest} className={className}>
+                        {children}
+                    </code>
+                );
+            },
+        },
     };
     allowedElements && (reactMarkdownProperties.allowedElements = allowedElements);
     reHypePlugins &&

package/src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useCallback, useEffect, useState } from "react";
 import { Elements, FlowElement } from "react-flow-renderer";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { EdgeTools, NodeTools, ReactFlow } from "./../../../index";
 import { ReactFlowProps } from "./ReactFlow";
@@ -361,7 +361,7 @@ export default {
             options: Object.keys(nodeExamples),
         },
     },
-} as ComponentMeta<typeof ReactFlow>;
+} as Meta<typeof ReactFlow>;
 
 const ReactFlowExample: FC<ReactFlowProps> = (args) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
@@ -402,10 +402,13 @@ const ReactFlowExample: FC<ReactFlowProps> = (args) => {
         [reactflowInstance]
     );
 
+    const { configuration, ...otherArgs } = args;
+
     return (
         <>
             <ReactFlow
-                configuration={args.configuration}
+                {...otherArgs}
+                configuration={configuration}
                 elements={elements}
                 style={{ height: "400px" }}
                 onLoad={onLoad}
@@ -418,9 +421,12 @@ const ReactFlowExample: FC<ReactFlowProps> = (args) => {
     );
 };
 
-const Template: ComponentStory<typeof ReactFlow> = (args) => <ReactFlowExample {...args} />;
+const Template: StoryFn<typeof ReactFlow> = (args) => <ReactFlowExample {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
     configuration: "unspecified",
+    "data-test-id": "reactflow-test-id",
+    "data-testid": "reactflow-testid",
 };
+Default.nodeExamples = nodeExamples;

package/src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx

@@ -4,7 +4,7 @@ import getColorConfiguration from "../../../common/utils/getColorConfiguration";
 import { CodeEditor } from "../../../extensions";
 import { ReactFlowHotkeyContext } from "../extensions/ReactFlowHotkeyContext";
 
-import { Button, FieldItem, Icon, SimpleDialog, Tag, TagList } from "./../../../index";
+import { Button, FieldItem, Icon, SimpleDialog, SimpleDialogProps, Tag, TagList } from "./../../../index";
 
 export type StickyNoteModalTranslationKeys = "modalTitle" | "noteLabel" | "colorLabel" | "saveButton" | "cancelButton";
 
@@ -28,10 +28,14 @@ export interface StickyNoteModalProps {
      * translation utility for language compatibility
      */
     translate: (key: StickyNoteModalTranslationKeys) => string;
+    /**
+     * Forward other properties to the `SimpleModal` element that is used for this dialog.
+     */
+    simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions">;
 }
 
 export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
-    ({ metaData, onClose, onSubmit, translate }) => {
+    ({ metaData, onClose, onSubmit, translate, simpleDialogProps }) => {
         const refNote = React.useRef<string>(metaData?.note ?? "");
         const [color, setSelectedColor] = React.useState<string>(metaData?.color ?? "");
         const noteColors: [string, string][] = Object.entries(getColorConfiguration("stickynotes")).map(
@@ -79,7 +83,6 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
 
         return (
             <SimpleDialog
-                data-test-id={"sticky-note-modal"}
                 size="small"
                 title={translate("modalTitle")}
                 hasBorder
@@ -101,6 +104,8 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
                         {translate("cancelButton")}
                     </Button>,
                 ]}
+                {...simpleDialogProps}
+                data-test-id={(simpleDialogProps ?? {})["data-test-id"] ?? "sticky-note-modal"} // @deprecated we remove this automatically set testid with the next major release
             >
                 <FieldItem
                     key="note"

package/src/common/index.ts

@@ -1,6 +1,7 @@
 import { invisibleZeroWidthCharacters } from "./utils/characters";
 import decideContrastColorValue from "./utils/colorDecideContrastvalue";
 import getColorConfiguration from "./utils/getColorConfiguration";
+import { getScrollParent } from "./utils/getScrollParent";
 import { getGlobalVar, setGlobalVar } from "./utils/globalVars";
 import { openInNewTab } from "./utils/openInNewTab";
 
@@ -11,6 +12,8 @@ export const utils = {
     invisibleZeroWidthCharacters,
     getGlobalVar,
     setGlobalVar,
+    getScrollParent,
 };
+
 // @deprecated use `utils`
 export const Utilities = utils;

package/src/common/utils/getScrollParent.ts

@@ -0,0 +1,20 @@
+/**
+ * Find the scroll parent of an element, returns `false` if it cannot be found.
+ * In case of a `false` return the very probably `document.documentElement` is the parent.
+ * In this case `window` object should be used for scroll event listeners.
+ * See `src/components/Sticky/StickyTarget.tsx` for an usage example.
+ * @param element
+ * @returns HTMLElement | false
+ */
+export const getScrollParent = (element: Element): HTMLElement | false => {
+    let scrollParent = element.parentElement;
+    while (scrollParent) {
+        const { overflow } = window.getComputedStyle(scrollParent);
+        if (overflow.split(" ").every((value) => value === "auto" || value === "scroll")) {
+            return scrollParent;
+        }
+        scrollParent = scrollParent.parentElement;
+    }
+
+    return false;
+};

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -156,6 +156,8 @@ export interface AutoCompleteFieldProps<T, UPDATE_VALUE> {
      * Use the full available width of the parent container.
      */
     fill?: boolean;
+    /** Utility that fetches more options when clicked*/
+    loadMoreResults?: () => Promise<T[]>;
 }
 
 export type IAutoCompleteFieldProps<T, UPDATE_VALUE> = AutoCompleteFieldProps<T, UPDATE_VALUE>;
@@ -195,6 +197,7 @@ export function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps
         requestErrorPrefix,
         hasBackDrop,
         fill,
+        loadMoreResults,
         ...otherProps
     } = props;
     const [selectedItem, setSelectedItem] = useState<T | undefined>(initialValue);
@@ -334,6 +337,7 @@ export function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps
             disabled: modifiers.disabled,
             highlightingEnabled: highlightingEnabled,
         };
+
         const renderedItem = itemRenderer(item, query, relevantModifiers, handleClick);
         if (typeof renderedItem === "string") {
             return (
@@ -442,6 +446,26 @@ export function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps
               createNewItemPosition,
           }
         : {};
+
+    const handleMenuScroll = React.useCallback(
+        async (event: any) => {
+            const menu = event.target;
+            const { scrollTop, scrollHeight, clientHeight } = menu;
+            // Check if scrolled to the bottom of the list
+            if (scrollTop + clientHeight >= scrollHeight && loadMoreResults) {
+                const results = await loadMoreResults();
+                if (results) {
+                    setFiltered((prev) => [...prev, ...results]);
+                    setTimeout(() => {
+                        menu.scrollTop = scrollHeight; //safari adaptation
+                        menu.scrollTo({ left: 0, top: scrollHeight, behavior: "auto" });
+                    });
+                }
+            }
+        },
+        [loadMoreResults]
+    );
+
     return (
         <BlueprintSuggest<T>
             className={`${eccgui}-autocompletefield__input` + (className ? ` ${className}` : "")}
@@ -455,7 +479,11 @@ export function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps
             noResults={<MenuItem disabled={true} text={noResultText} />}
             onItemSelect={onSelectionChange}
             onQueryChange={(q) => setQuery(q)}
+            resetOnQuery={false}
             closeOnSelect={true}
+            menuProps={{
+                onScroll: handleMenuScroll,
+            }}
             query={query}
             // This leads to odd compile errors without "as any"
             popoverProps={updatedContextOverlayProps as any}

package/src/components/AutocompleteField/autocompletefield.scss

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