@eccenca/gui-elements 24.0.0-rc.3 → 24.0.0-rc.5

package/dist/esm/extensions/react-flow/handles/HandleDefault.js

@@ -39,6 +39,7 @@ var __read = (this && this.__read) || function (o, n) {
 import React, { memo } from "react";
 import { Handle as HandleLegacy } from "react-flow-renderer";
 import { Handle as HandleNext } from "react-flow-renderer-lts";
+import { Classes as BlueprintClasses } from "@blueprintjs/core";
 import { intentClassName } from "../../../common/Intent/index.js";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants.js";
 import { useReactFlowVersion } from "../versionsupport.js";
@@ -49,22 +50,9 @@ export var HandleDefault = memo(function (_a) {
     var flowVersionCheck = flowVersion || evaluateFlowVersion;
     var handleDefaultRef = React.useRef();
     var _b = __read(React.useState(false), 2), extendedTooltipDisplayed = _b[0], setExtendedTooltipDisplayed = _b[1];
-    var _c = __read(React.useState(false), 2), handleToolsDisplayed = _c[0], setHandleToolsDisplayed = _c[1];
-    var routeClickToTools = React.useCallback(function (e) {
-        var toolsTarget = handleDefaultRef.current.getElementsByClassName("".concat(eccgui, "-graphviz__handletools-target"));
-        if (toolsTarget.length > 0 && e.target === handleDefaultRef.current) {
-            setHandleToolsDisplayed(true);
-            setExtendedTooltipDisplayed(false);
-        }
-    }, [handleDefaultRef]);
-    React.useEffect(function () {
-        var toolsTarget = handleDefaultRef.current.getElementsByClassName("".concat(eccgui, "-graphviz__handletools-target"));
-        if (toolsTarget && toolsTarget[0] && handleToolsDisplayed) {
-            toolsTarget[0].click();
-        }
-    }, [handleToolsDisplayed]);
+    var toolsTarget;
     React.useEffect(function () {
-        var toolsTarget = handleDefaultRef.current.getElementsByClassName("".concat(eccgui, "-graphviz__handletools-target"));
+        toolsTarget = handleDefaultRef.current.getElementsByClassName("".concat(eccgui, "-graphviz__handletools-target"));
         if (toolsTarget && toolsTarget[0]) {
             // Polyfill for FF that does not support the `:has()` pseudo selector until at least version 119 or 120
             // need to be re-evaluated then
@@ -87,23 +75,33 @@ export var HandleDefault = memo(function (_a) {
         },
         intent: intent,
         className: "".concat(eccgui, "-graphviz__handle__tooltip-target"),
-        isOpen: extendedTooltipDisplayed && !handleToolsDisplayed,
+        isOpen: extendedTooltipDisplayed,
     };
     var handleContentProps = __assign(__assign({}, data), { tooltipProps: __assign(__assign({}, handleContentTooltipProps), data === null || data === void 0 ? void 0 : data.tooltipProps) });
     var handleContent = React.createElement(HandleContent, __assign({}, handleContentProps), children);
     var switchTooltipTimerOn;
+    var switchToolsTimerOff;
     var handleConfig = __assign(__assign(__assign({}, handleProps), tooltipTitle), { className: intent ? "".concat(intentClassName(intent), " ") : "", onClick: function (e) {
             if (handleProps.onClick) {
                 handleProps.onClick(e);
             }
-            routeClickToTools(e);
-        }, "data-category": category, onMouseEnter: function () {
+            if (toolsTarget.length > 0 && e.target === handleDefaultRef.current) {
+                setExtendedTooltipDisplayed(false);
+                toolsTarget[0].click();
+            }
+        }, "data-category": category, onMouseEnter: function (e) {
             var _a, _b;
-            switchTooltipTimerOn = setTimeout(function () { return setExtendedTooltipDisplayed(true); }, (_b = (_a = data === null || data === void 0 ? void 0 : data.tooltipProps) === null || _a === void 0 ? void 0 : _a.hoverOpenDelay) !== null && _b !== void 0 ? _b : 500);
-            setHandleToolsDisplayed(false);
+            if (switchToolsTimerOff)
+                clearTimeout(switchToolsTimerOff);
+            if (e.target === handleDefaultRef.current) {
+                switchTooltipTimerOn = setTimeout(function () { return setExtendedTooltipDisplayed(true); }, (_b = (_a = data === null || data === void 0 ? void 0 : data.tooltipProps) === null || _a === void 0 ? void 0 : _a.hoverOpenDelay) !== null && _b !== void 0 ? _b : 500);
+            }
         }, onMouseLeave: function () {
             if (switchTooltipTimerOn)
                 clearTimeout(switchTooltipTimerOn);
+            if (toolsTarget.length > 0 && toolsTarget[0].classList.contains(BlueprintClasses.POPOVER_OPEN)) {
+                switchToolsTimerOff = setTimeout(function () { return toolsTarget[0].click(); }, 500);
+            }
             setExtendedTooltipDisplayed(false);
         } });
     switch (flowVersionCheck) {

package/dist/esm/extensions/react-flow/handles/HandleDefault.js.map

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

package/dist/esm/extensions/react-flow/handles/HandleTools.js

@@ -46,8 +46,9 @@ export var HandleTools = function (_a) {
     var configToolsDisplayed = toolsDisplayed
         ? {
             defaultIsOpen: true,
-            autoFocus: true,
-            interactionKind: BlueprintPopoverInteractionKind.HOVER,
+            autoFocus: false,
+            interactionKind: BlueprintPopoverInteractionKind.CLICK,
+            openOnTargetFocus: true,
             onClosing: function () { return setToolsDisplayed(false); },
         }
         : {
@@ -56,6 +57,6 @@ export var HandleTools = function (_a) {
             },
         };
     return (React.createElement(ContextOverlay, __assign({ hoverCloseDelay: 500 }, configToolsDisplayed, otherContextOverlayProps, { content: React.createElement("div", { className: "".concat(eccgui, "-graphviz__handletools-content") }, children), className: "".concat(eccgui, "-graphviz__handletools-target"), popoverClassName: "".concat(eccgui, "-graphviz__handletools-overlay") }),
-        React.createElement("div", { className: "".concat(eccgui, "-graphviz__handletools-target"), "data-test-id": otherContextOverlayProps["data-test-id"], "data-testid": otherContextOverlayProps["data-testid"] })));
+        React.createElement("div", { className: "".concat(eccgui, "-graphviz__handletools-placeholder"), "data-test-id": otherContextOverlayProps["data-test-id"], "data-testid": otherContextOverlayProps["data-testid"] })));
 };
 //# sourceMappingURL=HandleTools.js.map

package/dist/esm/extensions/react-flow/handles/HandleTools.js.map

@@ -1 +1 @@
-{"version":3,"file":"HandleTools.js","sourceRoot":"","sources":["../../../../../src/extensions/react-flow/handles/HandleTools.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,IAAI,+BAA+B,EAAE,MAAM,mBAAmB,CAAC;AAE9F,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAqB,MAAM,gBAAgB,CAAC;AAUnE,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAA2D;IAAzD,IAAA,QAAQ,cAAA,EAAK,wBAAwB,cAAvC,YAAyC,CAAF;IACzD,IAAA,KAAA,OAAsC,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,IAAA,EAAnE,cAAc,QAAA,EAAE,iBAAiB,QAAkC,CAAC;IAE3E,IAAM,oBAAoB,GAAG,cAAc;QACvC,CAAC,CAAC;YACI,aAAa,EAAE,IAAI;YACnB,SAAS,EAAE,IAAI;YACf,eAAe,EAAE,+BAA+B,CAAC,KAAK;YACtD,SAAS,EAAE,cAAM,OAAA,iBAAiB,CAAC,KAAK,CAAC,EAAxB,CAAwB;SAC5C;QACH,CAAC,CAAC;YACI,SAAS,EAAE;gBACP,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC5B,CAAC;SACJ,CAAC;IAER,OAAO,CACH,oBAAC,cAAc,aACX,eAAe,EAAE,GAAG,IAChB,oBAAoB,EACpB,wBAAwB,IAC5B,OAAO,EAAE,6BAAK,SAAS,EAAE,UAAG,MAAM,mCAAgC,IAAG,QAAQ,CAAO,EACpF,SAAS,EAAE,UAAG,MAAM,kCAA+B,EACnD,gBAAgB,EAAE,UAAG,MAAM,mCAAgC;QAE3D,6BACI,SAAS,EAAE,UAAG,MAAM,kCAA+B,kBACrC,wBAAwB,CAAC,cAAc,CAAC,iBACzC,wBAAwB,CAAC,aAAa,CAAC,GACtD,CACW,CACpB,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"HandleTools.js","sourceRoot":"","sources":["../../../../../src/extensions/react-flow/handles/HandleTools.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,IAAI,+BAA+B,EAAE,MAAM,mBAAmB,CAAC;AAE9F,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAqB,MAAM,gBAAgB,CAAC;AAUnE,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAA2D;IAAzD,IAAA,QAAQ,cAAA,EAAK,wBAAwB,cAAvC,YAAyC,CAAF;IACzD,IAAA,KAAA,OAAsC,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,IAAA,EAAnE,cAAc,QAAA,EAAE,iBAAiB,QAAkC,CAAC;IAE3E,IAAM,oBAAoB,GAAG,cAAc;QACvC,CAAC,CAAC;YACI,aAAa,EAAE,IAAI;YACnB,SAAS,EAAE,KAAK;YAChB,eAAe,EAAE,+BAA+B,CAAC,KAAK;YACtD,iBAAiB,EAAE,IAAI;YACvB,SAAS,EAAE,cAAM,OAAA,iBAAiB,CAAC,KAAK,CAAC,EAAxB,CAAwB;SAC5C;QACH,CAAC,CAAC;YACI,SAAS,EAAE;gBACP,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC5B,CAAC;SACJ,CAAC;IAER,OAAO,CACH,oBAAC,cAAc,aACX,eAAe,EAAE,GAAG,IAChB,oBAAoB,EACpB,wBAAwB,IAC5B,OAAO,EAAE,6BAAK,SAAS,EAAE,UAAG,MAAM,mCAAgC,IAAG,QAAQ,CAAO,EACpF,SAAS,EAAE,UAAG,MAAM,kCAA+B,EACnD,gBAAgB,EAAE,UAAG,MAAM,mCAAgC;QAE3D,6BACI,SAAS,EAAE,UAAG,MAAM,uCAAoC,kBAC1C,wBAAwB,CAAC,cAAc,CAAC,iBACzC,wBAAwB,CAAC,aAAa,CAAC,GACtD,CACW,CACpB,CAAC;AACN,CAAC,CAAC"}

package/dist/types/cmem/markdown/Markdown.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { PluggableList } from "react-markdown/lib/react-markdown";
-import { TestableComponent } from "../../index";
+import { HtmlContentBlockProps, TestableComponent } from "../../index";
 export interface MarkdownProps extends TestableComponent {
     children: string;
     /**
@@ -18,7 +18,8 @@ export interface MarkdownProps extends TestableComponent {
      */
     allowedElements?: string[];
     /**
-     * Do not wrap it in a content block element.
+     * Do not wrap content in a `HtmlContentBlock` component.
+     * This option is ignored if `htmlContentBlockProps` or `data-test-id` is given.
      */
     inheritBlock?: boolean;
     /**
@@ -31,6 +32,10 @@ export interface MarkdownProps extends TestableComponent {
      * Set to `false` to disable this feature.
      */
     linkTargetName?: false | string;
+    /**
+     * Configure the `HtmlContentBlock` component that is automatically used as wrapper for the parsed Markdown content.
+     */
+    htmlContentBlockProps?: Omit<HtmlContentBlockProps, "children" | "className" | "data-test-id">;
 }
 /** Renders a markdown string. */
-export declare const Markdown: ({ children, allowHtml, removeMarkup, inheritBlock, allowedElements, reHypePlugins, linkTargetName, ...otherProps }: MarkdownProps) => React.JSX.Element;
+export declare const Markdown: ({ children, allowHtml, removeMarkup, inheritBlock, allowedElements, reHypePlugins, linkTargetName, htmlContentBlockProps, ...otherProps }: MarkdownProps) => React.JSX.Element;

package/dist/types/components/Icon/canonicalIconNames.d.ts

@@ -15,7 +15,8 @@ declare const canonicalIcons: {
     "application-notification": icons.CarbonIconType;
     "artefact-chatlog": icons.CarbonIconType;
     "artefact-commit": icons.CarbonIconType;
-    "artefact-customtask": icons.CarbonIconType;
+    "artefact-task-deleteprojectfiles": icons.CarbonIconType;
+    "artefact-task-downloadfile": icons.CarbonIconType;
     "artefact-dataset-csv": icons.CarbonIconType;
     "artefact-dataset-eccencadataplatform": icons.CarbonIconType;
     "artefact-dataset-excel": icons.CarbonIconType;

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

@@ -103,6 +103,12 @@ interface MultiSelectCommonProps<T> extends TestableComponent, Pick<BlueprintMul
      * If not provided, values are filtered by their labels
      */
     searchPredicate?: (item: T, query: string) => boolean;
+    /**
+     * Limits the height of the input target plus its dropdown menu when it is opened.
+     * Need to be a `number not greater than 100` (as `vh`, a unit describing a length relative to the viewport height) or `true` (equals 100).
+     * If not set than the dropdown menu cannot be larger that appr. the half of the available viewport hight.
+     */
+    limitHeightOpened?: boolean | number;
 }
 /** @deprecated (v25) use MultiSuggestFieldProps */
 export type MultiSelectProps<T> = MultiSelectCommonProps<T> & ({
@@ -122,7 +128,7 @@ export type MultiSelectProps<T> = MultiSelectCommonProps<T> & ({
  * This component will be re-implemented as `Select` like element allowing multiple selections (or a `Select` option).
  * New name for this component is `MultiSuggestField`.
  */
-declare function MultiSelect<T>({ items, selectedItems: externalSelectedItems, prePopulateWithItems, itemId, itemLabel, onSelection, contextOverlayProps, tagInputProps, inputProps, runOnQueryChange, fullWidth, noResultText, newItemCreationText, newItemPostfix, hasStatePrimary, hasStateDanger, hasStateSuccess, hasStateWarning, disabled, createNewItemFromQuery, requestDelay, clearQueryOnSelection, className, "data-test-id": dataTestId, "data-testid": dataTestid, wrapperProps, searchPredicate, ...otherMultiSelectProps }: MultiSelectProps<T>): React.JSX.Element;
+declare function MultiSelect<T>({ items, selectedItems: externalSelectedItems, prePopulateWithItems, itemId, itemLabel, onSelection, contextOverlayProps, tagInputProps, inputProps, runOnQueryChange, fullWidth, noResultText, newItemCreationText, newItemPostfix, hasStatePrimary, hasStateDanger, hasStateSuccess, hasStateWarning, disabled, createNewItemFromQuery, requestDelay, clearQueryOnSelection, className, "data-test-id": dataTestId, "data-testid": dataTestid, wrapperProps, searchPredicate, limitHeightOpened, ...otherMultiSelectProps }: MultiSelectProps<T>): React.JSX.Element;
 declare namespace MultiSelect {
     var ofType: typeof BlueprintMultiSelect.ofType;
 }

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

@@ -12,7 +12,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      */
     size?: "small" | "medium" | "large";
     /**
-     * The tolltip will be attached to this element when it is hovered.
+     * The tooltip will be attached to this element when it is hovered.
      */
     children: React.ReactNode | React.ReactNode[];
     /**

package/dist/types/components/Typography/HtmlContentBlock.d.ts

@@ -1,16 +1,28 @@
 import React from "react";
 export interface HtmlContentBlockProps extends React.HTMLAttributes<HTMLDivElement> {
-    className?: string;
+    /**
+     * Content block uses smaller font size.
+     */
     small?: boolean;
+    /**
+     * To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line.
+     */
+    linebreakForced?: boolean;
+    /**
+     * No automatic line breaks are inserted.
+     */
+    linebreakPrevented?: boolean;
+    /**
+     * Sub elements like code blocks are displayed without own scrollbars.
+     * This option may infer with `linebreakForced` and `linebreakPrevented`.
+     */
+    noScrollbarsOnChildren?: boolean;
     /** currently not supported */
     large?: boolean;
     /** currently not supported */
     muted?: boolean;
     /** currently not supported */
     disabled?: boolean;
-    linebreakForced?: boolean;
-    linebreakPrevented?: boolean;
-    noScrollbarsOnChildren?: boolean;
 }
 export declare const HtmlContentBlock: ({ className, children, small, large, muted, disabled, linebreakForced, linebreakPrevented, noScrollbarsOnChildren, ...otherProps }: HtmlContentBlockProps) => React.JSX.Element;
 export default HtmlContentBlock;

package/dist/types/extensions/codemirror/CodeMirror.d.ts

@@ -1,4 +1,4 @@
-import React, { AllHTMLAttributes } from "react";
+import React from "react";
 import { Extension } from "@codemirror/state";
 import { EditorView, Rect } from "@codemirror/view";
 import { SupportedCodeEditorModes } from "./hooks/useCodemirrorModeExtension.hooks";
@@ -63,7 +63,7 @@ export interface CodeEditorProps {
     height?: number | string;
     /** Long lines are wrapped and displayed on multiple lines */
     wrapLines?: boolean;
-    outerDivAttributes?: Partial<AllHTMLAttributes<HTMLDivElement>>;
+    outerDivAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "data-test-id">;
     /**
      * Size in spaces that is used for a tabulator key.
      */

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": "24.0.0-rc.3",
+    "version": "24.0.0-rc.5",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -70,52 +70,52 @@
         "@blueprintjs/select": "^5.2.2",
         "@carbon/icons": "^11.47.1",
         "@carbon/react": "^1.64.1",
-        "@mavrin/remark-typograf": "^2.2.0",
-        "codemirror": "^6.0.1",
-        "@codemirror/legacy-modes": "^6.4.1",
-        "@codemirror/lang-markdown": "^6.2.5",
         "@codemirror/lang-json": "^6.0.1",
+        "@codemirror/lang-markdown": "^6.3.1",
         "@codemirror/lang-xml": "^6.1.0",
-        "xml-formatter": "^3.6.3",
+        "@codemirror/legacy-modes": "^6.4.2",
+        "@mavrin/remark-typograf": "^2.2.0",
+        "codemirror": "^6.0.1",
         "color": "^4.2.3",
         "compute-scroll-into-view": "^3.1.0",
         "lodash": "^4.17.21",
-        "re-resizable": "6.9.9",
+        "re-resizable": "^6.10.1",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-flow-renderer": "9.7.4",
         "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",
+        "react-syntax-highlighter": "^15.6.1",
         "rehype-raw": "^6.1.1",
         "remark-definition-list": "^1.2.0",
         "remark-gfm": "^3.0.1",
         "remark-parse": "^10.0.2",
         "reset-css": "^5.0.2",
         "unified": "^11.0.5",
-        "wicg-inert": "^3.1.3"
+        "wicg-inert": "^3.1.3",
+        "xml-formatter": "^3.6.3"
     },
     "devDependencies": {
-        "@babel/core": "^7.25.2",
+        "@babel/core": "^7.26.0",
         "@babel/plugin-proposal-class-properties": "^7.16.7",
         "@babel/plugin-proposal-private-methods": "^7.16.11",
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-        "@babel/preset-env": "^7.25.4",
-        "@babel/preset-flow": "^7.24.7",
-        "@babel/preset-react": "^7.24.7",
-        "@babel/preset-typescript": "^7.24.7",
-        "@storybook/addon-actions": "^8.2.9",
-        "@storybook/addon-essentials": "^8.2.9",
-        "@storybook/addon-jest": "^8.2.9",
-        "@storybook/addon-links": "^8.2.9",
+        "@babel/preset-env": "^7.26.0",
+        "@babel/preset-flow": "^7.25.9",
+        "@babel/preset-react": "^7.25.9",
+        "@babel/preset-typescript": "^7.26.0",
+        "@storybook/addon-actions": "^8.4.3",
+        "@storybook/addon-essentials": "^8.4.3",
+        "@storybook/addon-jest": "^8.4.3",
+        "@storybook/addon-links": "^8.4.3",
         "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-        "@storybook/cli": "^8.2.9",
+        "@storybook/cli": "^8.4.3",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^8.2.9",
-        "@storybook/react-webpack5": "^8.2.9",
-        "@storybook/test": "^8.2.9",
-        "@testing-library/jest-dom": "^6.5.0",
+        "@storybook/react": "^8.4.3",
+        "@storybook/react-webpack5": "^8.4.3",
+        "@storybook/test": "^8.4.3",
+        "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^12.1.2",
         "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
@@ -125,7 +125,7 @@
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
         "babel-jest": "^29.7.0",
-        "chromatic": "^11.7.1",
+        "chromatic": "^11.18.1",
         "eslint": "^8.57.0",
         "eslint-plugin-react": "^7.35.0",
         "eslint-plugin-react-hooks": "^4.6.2",
@@ -144,7 +144,7 @@
         "rimraf": "^5.0.10",
         "sass": "1.62.1",
         "sass-loader": "10.3.1",
-        "storybook": "^8.2.9",
+        "storybook": "^8.4.3",
         "stylelint": "^15.11.0",
         "stylelint-config-recess-order": "^4.6.0",
         "stylelint-config-standard-scss": "^9.0.0",
@@ -161,7 +161,9 @@
     },
     "resolutions": {
         "**/@types/react": "^17.0.80",
-        "node-sass-package-importer/**/postcss": "^8.4.41"
+        "node-sass-package-importer/**/postcss": "^8.4.41",
+        "**/cross-spawn": "^7.0.5 ",
+        "**/micromatch": "^4.0.8"
     },
     "husky": {
         "hooks": {

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

@@ -52,6 +52,12 @@ another code block
 {{templateVar}}
 \`\`\`
 
+\`\`\`json
+{
+    "json": "varname"
+}
+\`\`\`
+
 > This is a block quote.
 >
 > With 2 paragraphs.

package/src/cmem/markdown/Markdown.tsx

@@ -2,14 +2,14 @@ import React from "react";
 import ReactMarkdown from "react-markdown";
 import { PluggableList } from "react-markdown/lib/react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { materialLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 // @ts-ignore: No declaration file for module (TODO: should be @ts-expect-error but GUI elements is used inside project with `noImplicitAny=false`)
 import remarkTypograf from "@mavrin/remark-typograf";
 import rehypeRaw from "rehype-raw";
 import { remarkDefinitionList } from "remark-definition-list";
 import remarkGfm from "remark-gfm";
 
-import { HtmlContentBlock, TestableComponent } from "../../index";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { HtmlContentBlock, HtmlContentBlockProps, TestableComponent } from "../../index";
 
 export interface MarkdownProps extends TestableComponent {
     children: string;
@@ -28,7 +28,8 @@ export interface MarkdownProps extends TestableComponent {
      */
     allowedElements?: string[];
     /**
-     * Do not wrap it in a content block element.
+     * Do not wrap content in a `HtmlContentBlock` component.
+     * This option is ignored if `htmlContentBlockProps` or `data-test-id` is given.
      */
     inheritBlock?: boolean;
     /**
@@ -41,6 +42,10 @@ export interface MarkdownProps extends TestableComponent {
      * Set to `false` to disable this feature.
      */
     linkTargetName?: false | string;
+    /**
+     * Configure the `HtmlContentBlock` component that is automatically used as wrapper for the parsed Markdown content.
+     */
+    htmlContentBlockProps?: Omit<HtmlContentBlockProps, "children" | "className" | "data-test-id">;
 }
 
 const configDefault = {
@@ -102,6 +107,7 @@ export const Markdown = ({
     allowedElements,
     reHypePlugins,
     linkTargetName = "_mdref",
+    htmlContentBlockProps,
     ...otherProps
 }: MarkdownProps) => {
     const configHtml = allowHtml
@@ -134,15 +140,17 @@ export const Markdown = ({
             : undefined,
         components: {
             code(props: any) {
-                const { children, className, node, ...rest } = props;
+                const { children, className, node, inline, ...rest } = props;
                 const match = /language-(\w+)/.exec(className || "");
                 return match ? (
                     <SyntaxHighlighter
                         {...rest}
                         PreTag="div"
+                        codeTagProps={{
+                            className: `${eccgui}-markdown__syntaxhighlighter`,
+                        }}
                         children={String(children).replace(/\n$/, "")}
                         language={match[1]}
-                        style={materialLight}
                     />
                 ) : (
                     <code {...rest} className={className}>
@@ -160,9 +168,15 @@ export const Markdown = ({
 
     // @ts-ignore because against the lib spec it does not allow a function for linkTarget.
     const markdownDisplay = <ReactMarkdown {...reactMarkdownProperties} />;
-    return inheritBlock ? (
+    return inheritBlock && !(otherProps["data-test-id"] || htmlContentBlockProps) ? (
         markdownDisplay
     ) : (
-        <HtmlContentBlock data-test-id={otherProps["data-test-id"]}>{markdownDisplay}</HtmlContentBlock>
+        <HtmlContentBlock
+            {...htmlContentBlockProps}
+            className={`${eccgui}-markdown__container`}
+            data-test-id={otherProps["data-test-id"]}
+        >
+            {markdownDisplay}
+        </HtmlContentBlock>
     );
 };

package/src/components/Application/_config.scss

@@ -5,7 +5,7 @@
 */
 
 /// should be already imported
-//@import '~@carbon/react/scss/colors';
+// @import '~@carbon/react/scss/colors';
 
 /*
 //----------------------------------------------------------------------------

package/src/components/Application/stories/Application.stories.tsx

@@ -17,6 +17,7 @@ import {
     Button,
     Depiction,
     Icon,
+    OverviewItem,
     WorkspaceHeader,
 } from "../../../index";
 
@@ -76,7 +77,16 @@ const TemplateBasicExample: StoryFn<typeof ApplicationBasicExample> = (args) =>
                 <code>Menu</code> with <code>MenuItem</code>s.
             </ApplicationSidebarNavigation>
 
-            <WorkspaceHeader id={"ApplicationBasicExample"} />
+            <WorkspaceHeader id={"ApplicationBasicExample"}>
+                <OverviewItem>
+                    <Depiction
+                        image={<Icon name={"application-homepage"} />}
+                        backgroundColor={"dark"}
+                        padding="medium"
+                        ratio="1:1"
+                    />
+                </OverviewItem>
+            </WorkspaceHeader>
 
             <ApplicationToolbar>
                 <ApplicationToolbarSection>

package/src/components/AutoSuggestion/AutoSuggestion.scss

@@ -27,37 +27,50 @@
     }
 }
 
+.#{$eccgui}-autosuggestion__inputfield {
+    background-color: $eccgui-color-textfield-background;
+}
+
 .#{$eccgui}-singlelinecodeeditor {
-    position: relative;
-    padding: 0 1px;
+    padding: 0;
 
     [class^="cm-theme"] {
         width: 100%;
     }
 
+    &:has(.cm-editor.cm-focused) {
+        box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
+    }
+
     .cm-editor {
-        top: 2px;
+        top: 1px;
         height: calc(#{$eccgui-size-textfield-height-regular} - 2px);
         padding: 0;
         margin: 0;
         overflow: hidden;
+        background-color: transparent;
+        border-radius: 0;
+        box-shadow: none;
 
         &.cm-focused {
             outline: none;
+            box-shadow: none;
         }
 
         .cm-scroller {
+            height: 100%;
             padding: 0;
             margin: 0;
             overflow: auto hidden !important;
         }
 
-        .CodeMirror-vscrollbar {
-            display: none !important;
-        }
-
         .cm-content {
-            vertical-align: middle;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            height: 100%;
+            min-height: 100%;
+            padding: 0;
             border: none;
         }
 

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -240,15 +240,9 @@ const AutoSuggestion = ({
     }, [cm, editorState]);
 
     const dispatch = // eslint-disable-next-line @typescript-eslint/no-empty-function
-    (typeof editorState?.cm?.dispatch === "function" ? editorState?.cm?.dispatch : () => {}) as EditorView["dispatch"];
-
-    React.useEffect(() => {
-        if (initialValue != null && cm) {
-            dispatch({
-                changes: { from: 0, to: cm?.state?.doc.length, insert: initialValue },
-            });
-        }
-    }, [initialValue, cm]);
+        (
+            typeof editorState?.cm?.dispatch === "function" ? editorState?.cm?.dispatch : () => {}
+        ) as EditorView["dispatch"];
 
     React.useEffect(() => {
         editorState.dropdownShown = shouldShowDropdown;
@@ -609,6 +603,36 @@ const AutoSuggestion = ({
         []
     );
 
+    const codeEditor = React.useMemo(() => {
+        return (
+            <ExtendedCodeEditor
+                mode={mode}
+                setCM={setCM}
+                onChange={handleChange}
+                onCursorChange={handleCursorChange}
+                initialValue={initialValue}
+                onFocusChange={handleInputFocus}
+                onKeyDown={handleInputEditorKeyPress}
+                enableTab={useTabForCompletions}
+                placeholder={placeholder}
+                onSelection={onSelection}
+                showScrollBar={showScrollBar}
+                multiline={multiline}
+                onMouseDown={handleInputMouseDown}
+            />
+        );
+    }, [
+        mode,
+        setCM,
+        handleChange,
+        initialValue,
+        useTabForCompletions,
+        placeholder,
+        showScrollBar,
+        multiline,
+        handleInputMouseDown,
+    ]);
+
     const hasError = !!value.current && !pathIsValid && !pathValidationPending;
     const autoSuggestionInput = (
         <div
@@ -642,21 +666,7 @@ const AutoSuggestion = ({
                         />
                     }
                 >
-                    <ExtendedCodeEditor
-                        mode={mode}
-                        setCM={setCM}
-                        onChange={handleChange}
-                        onCursorChange={handleCursorChange}
-                        initialValue={initialValue}
-                        onFocusChange={handleInputFocus}
-                        onKeyDown={handleInputEditorKeyPress}
-                        enableTab={useTabForCompletions}
-                        placeholder={placeholder}
-                        onSelection={onSelection}
-                        showScrollBar={showScrollBar}
-                        multiline={multiline}
-                        onMouseDown={handleInputMouseDown}
-                    />
+                    {codeEditor}
                 </ContextOverlay>
                 {!!value.current && (
                     <span className={BlueprintClassNames.INPUT_ACTION} ref={inputactionsDisplayed}>