@eccenca/gui-elements 25.0.0-rc.2 → 25.1.0-rc.0

package/src/components/OverviewItem/stories/OverviewItemLine.stories.tsx

@@ -9,7 +9,7 @@ export default {
     component: OverviewItemLine,
     argTypes: {
         children: {
-            control: "none",
+            control: false,
             description: "Elements for line content.",
         },
     },

package/src/components/PropertyValuePair/propertyvalue.scss

@@ -5,9 +5,9 @@
 }
 
 .#{$eccgui}-propertyvalue__pair {
+    clear: both;
     display: block;
     width: 100%;
-    clear: both;
 
     &.#{$eccgui}-propertyvalue__pair--hasdivider {
         &:not(:last-child) {
@@ -94,3 +94,25 @@
         }
     }
 }
+
+@media print {
+    .#{$eccgui}-propertyvalue__pair,
+    .#{$eccgui}-propertyvalue__property,
+    .#{$eccgui}-propertyvalue__value {
+        position: relative;
+        float: none !important;
+        display: block;
+        width: auto;
+        height: auto;
+        min-height: 0 !important;
+        padding: 0;
+        margin: 0 !important;
+
+        &:is(.#{$eccgui}-propertyvalue__property) {
+            margin-bottom: 0.25 * $eccgui-size-block-whitespace !important;
+        }
+        &:is(.#{$eccgui}-propertyvalue__pair) {
+            margin-bottom: 0.5 * $eccgui-size-block-whitespace !important;
+        }
+    }
+}

package/src/components/Separation/separation.scss

@@ -101,3 +101,9 @@ $eccgui-color-separation-divider: $pt-divider-black !default;
         margin: 0 $eccgui-size-separation-spacing-medium;
     }
 }
+
+@media print {
+    .#{$eccgui}-separation__divider-horizontal {
+        print-color-adjust: exact;
+    }
+}

package/src/components/Table/table.scss

@@ -356,3 +356,25 @@ tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] {
         min-height: $eccgui-size-tablecell-height-regular;
     }
 }
+
+@media print {
+    .#{$eccgui}-simpletable:has(.#{$eccgui}-simpletable__cell > .#{$eccgui}-typography__overflowtext) {
+        // allow 2 lines of text in `<OverflowText />` elements that are direct children of table cells
+        .#{$eccgui}-simpletable__cell {
+            & > .#{$eccgui}-typography__overflowtext,
+            & > .#{$eccgui}-typography__overflowtext--passdown {
+                display: inline;
+                overflow: visible;
+                text-overflow: unset;
+                white-space: unset;
+            }
+            & > .#{$eccgui}-typography__overflowtext {
+                display: -webkit-box;
+                overflow: hidden;
+                -webkit-line-clamp: 2;
+                line-clamp: 2;
+                -webkit-box-orient: vertical;
+            }
+        }
+    }
+}

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Tabs, TabTitle as TabTitleOrg } from "./../../../";
+import { Tabs, TabTitle as TabTitleOrg, TabTitleProps } from "./../../../";
 
 export default {
     title: "Components/Tabs/TabTitle",
@@ -9,7 +9,7 @@ export default {
     argTypes: {},
 } as Meta<typeof TabTitleOrg>;
 
-const TabTitle = (args) => {
+const TabTitle = (args: React.JSX.IntrinsicAttributes & TabTitleProps) => {
     return (
         <Tabs
             id="titledemo"
@@ -31,3 +31,8 @@ TabTitleElement.args = {
     titlePrefix: "[",
     titleSuffix: <span>]</span>,
 };
+
+export const TabTitleSymbolElement = TemplateFull.bind({});
+TabTitleSymbolElement.args = {
+    text: "★",
+};

package/src/components/Tag/stories/TagList.stories.tsx

@@ -8,7 +8,7 @@ export default {
     component: TagList,
     argTypes: {
         children: {
-            control: "none",
+            control: false,
         },
     },
 } as Meta<typeof TagList>;
@@ -18,5 +18,5 @@ const Template: StoryFn<typeof TagList> = (args) => <TagList {...args} />;
 export const List = Template.bind({});
 List.args = {
     label: "Tag list",
-    children: [<Tag>Short</Tag>, <Tag>List</Tag>, <Tag>Of</Tag>, <Tag>Tags</Tag>],
+    children: [<Tag small>Short</Tag>, <Tag>List</Tag>, <Tag>Of</Tag>, <Tag large>Tags</Tag>],
 };

package/src/components/Tag/tag.scss

@@ -30,12 +30,15 @@ $tag-round-adjustment: 0 !default;
 @import "~@blueprintjs/core/src/components/tag/tag";
 
 .#{$eccgui}-tag__item {
+    --eccgui-tag-border-width: 1px;
+
     flex-grow: 0;
     flex-shrink: 0;
     min-width: calc(#{$tag-height} - 2px);
     min-height: calc(#{$tag-height} - 2px);
     max-height: calc(#{$tag-height} - 2px);
     padding: 0 $tag-padding-top;
+    line-height: calc(#{$tag-height} - 2px);
 
     &.#{$ns}-round {
         border-radius: $tag-height * 0.5;
@@ -55,11 +58,12 @@ $tag-round-adjustment: 0 !default;
     }
 
     &.#{$eccgui}-tag--small {
-        min-width: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        min-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        max-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
+        min-width: calc(#{$tag-height-small} + #{$tag-padding-small});
+        min-height: calc(#{$tag-height-small} + #{$tag-padding-small});
+        max-height: calc(#{$tag-height-small} + #{$tag-padding-small});
         padding: 0 $tag-padding-small;
-        line-height: calc(#{$tag-height-small} - 2px);
+        font-size: calc(#{$eccgui-size-typo-tag} - 1px);
+        line-height: calc(#{$tag-height-small} + #{$tag-padding-small});
 
         &.#{$ns}-round {
             border-radius: $tag-height-small * 0.5;
@@ -75,7 +79,7 @@ $tag-round-adjustment: 0 !default;
         min-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         max-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         font-size: $eccgui-size-typo-tag-large;
-        line-height: calc(#{$tag-height-large} - 2px);
+        line-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
 
         &.#{$ns}-round {
             border-radius: $tag-height-large * 0.5;
@@ -138,7 +142,7 @@ $tag-round-adjustment: 0 !default;
 
 .#{$ns}-tag {
     border-style: solid;
-    border-width: 1px;
+    border-width: var(--eccgui-tag-border-width);
 
     &:not([class*="#{$ns}-intent-"]) {
         --eccgui-tag-bg: #{$tag-default-color};
@@ -151,7 +155,7 @@ $tag-round-adjustment: 0 !default;
             var(--eccgui-tag-bg) var(--eccgui-tag-emfactor),
             eccgui-color-var("identity", "background", "100")
         );
-        border-color: var(--eccgui-tag-border);
+        border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
 
         &.#{$eccgui}-tag--strongeremphasis {
             --eccgui-tag-emfactor: 95%;
@@ -211,7 +215,7 @@ $tag-round-adjustment: 0 !default;
                 var(--eccgui-tag-bg) var(--eccgui-tag-emfactor),
                 eccgui-color-var("identity", "background", "100")
             );
-            border-color: var(--eccgui-tag-border);
+            border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
 
             &.#{$eccgui}-tag--strongeremphasis {
                 --eccgui-tag-emfactor: 100%;
@@ -231,7 +235,7 @@ $tag-round-adjustment: 0 !default;
 
             &[class*="#{$eccgui}-intent--"] {
                 color: eccgui-color-rgba(var(--eccgui-tag-text), var(--eccgui-tag-emfactor));
-                border-color: eccgui-color-rgba(var(--eccgui-tag-border), var(--eccgui-tag-emfactor));
+                border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
             }
 
             &.#{$eccgui}-intent--primary {
@@ -267,3 +271,9 @@ $tag-round-adjustment: 0 !default;
         }
     }
 }
+
+@media print {
+    .#{$eccgui}-tag__item {
+        print-color-adjust: exact;
+    }
+}

package/src/components/TextReducer/TextReducer.stories.tsx

@@ -18,8 +18,9 @@ Default.args = {
         <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />,
         "Simple text with URL http://example.com/ that should not get parsed.",
         "a < b to test equations in text like b > a.",
+        `Something with a "quote" in it.`,
         <>
-            <Markdown>{`* This\n* is\n* a\n* list\n\nwritten in Markdown.`}</Markdown>
+            <Markdown>{`* This\n* is\n* a\n* list\n\nwritten in Markdown\n* containing a few HTML 'entities' & "quotes".`}</Markdown>
             <HtmlContentBlock>
                 <h1>Block with sub elements</h1>
                 <LoremIpsum p={3} avgSentencesPerParagraph={3} random={false} />

package/src/components/TextReducer/TextReducer.test.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { render, RenderResult } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { Markdown, TextReducer } from "./../../";
+import { Default as TextReducerStory } from "./TextReducer.stories";
+
+describe("TextReducer", () => {
+    const textMustExist = (queryByText: RenderResult["queryByText"], text: string) => {
+        expect(queryByText(text, { exact: false })).not.toBeNull();
+    };
+    const textMustNotExist = (queryByText: RenderResult["queryByText"], text: string) => {
+        expect(queryByText(text, { exact: false })).toBeNull();
+    };
+    it("should display encoded HTML entities by default if they are used in the transformed markup", () => {
+        const { queryByText } = render(<TextReducer {...TextReducerStory.args} />);
+        textMustExist(queryByText, "&#x27;entities&#x27; &amp; &quot;quotes&quot;");
+        textMustNotExist(queryByText, `'entities' & "quotes"`);
+    });
+    it("should not display encoded HTML entities if `decodeHtmlEntities` is enabled", () => {
+        const { queryByText } = render(<TextReducer {...TextReducerStory.args} decodeHtmlEntities />);
+        textMustNotExist(queryByText, "&#x27;entities&#x27; &amp; &quot;quotes&quot;");
+        textMustExist(queryByText, `'entities' & "quotes"`);
+    });
+    it("should only decode if correct encoded HTML entities are found (strict mode)", () => {
+        const { queryByText } = render(
+            <TextReducer decodeHtmlEntities>
+                <Markdown>&</Markdown>&amp foo&ampbar
+            </TextReducer>
+        );
+        textMustExist(queryByText, "& &amp foo&ampbar");
+        textMustNotExist(queryByText, "& & foo&ampbar");
+    });
+    it("should allow decoding non-strict encoded HTML entities", () => {
+        const { queryByText } = render(
+            <TextReducer decodeHtmlEntities decodeHtmlEntitiesOptions={{ strict: false }}>
+                <Markdown>&</Markdown>&amp foo&ampbar
+            </TextReducer>
+        );
+        textMustNotExist(queryByText, "& &amp foo&ampbar");
+        textMustExist(queryByText, "& & foo&ampbar");
+    });
+});

package/src/components/TextReducer/TextReducer.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { reduceToText } from "../../common/utils/reduceToText";
+import { DecodeHtmlEntitiesOptions, utils } from "../../common";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { OverflowText, OverflowTextProps } from "./../Typography";
@@ -24,6 +24,17 @@ export interface TextReducerProps extends Pick<React.HTMLAttributes<HTMLElement>
      * Specify more `OverflowText` properties used when `useOverflowTextWrapper` is set to `true`.
      */
     overflowTextProps?: Omit<OverflowTextProps, "passDown">;
+    /**
+     * If you transform HTML markup to text then the result could contain HTML entity encoded strings.
+     * By enabling this option they are decoded back to it's original char.
+     */
+    decodeHtmlEntities?: boolean;
+    /**
+     * Set the options used to decode the HTML entities, if `decodeHtmlEntities` is enabled.
+     * Internally we use `he` library, see their [documentation on decode options](https://www.npmjs.com/package/he#hedecodehtml-options).
+     * If not set we use `{ isAttributeValue: true, strict: true }` as default value.
+     */
+    decodeHtmlEntitiesOptions?: DecodeHtmlEntitiesOptions;
 }
 
 /**
@@ -32,16 +43,15 @@ export interface TextReducerProps extends Pick<React.HTMLAttributes<HTMLElement>
  */
 export const TextReducer = ({
     children,
-    maxNodes,
-    maxLength,
     useOverflowTextWrapper,
     overflowTextProps,
+    ...reduceToTextOptions
 }: TextReducerProps) => {
     if (typeof children === "undefined") {
         return <></>;
     }
 
-    const shrinkedContent = reduceToText(children, { maxLength, maxNodes });
+    const shrinkedContent = utils.reduceToText(children, reduceToTextOptions);
 
     return useOverflowTextWrapper ? (
         <OverflowText

package/src/components/Typography/InlineText.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestableComponent } from "../interfaces";
+
+export interface InlineTextProps extends React.HTMLAttributes<HTMLElement>, TestableComponent {
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+}
+
+/**
+ * Forces all children to be displayed as inline content.
+ */
+export const InlineText = ({ className = "", children, ...otherProps }: InlineTextProps) => {
+    return (
+        <div {...otherProps} className={`${eccgui}-typography__inlinetext` + (className ? " " + className : "")}>
+            {children}
+        </div>
+    );
+};
+
+export default InlineText;

package/src/components/Typography/_reset.scss

@@ -7,6 +7,7 @@ select,
 input,
 textarea {
     font-family: inherit;
+    font-size-adjust: inherit;
     border-radius: 0;
 }
 

package/src/components/Typography/index.ts

@@ -2,3 +2,4 @@ export * from "./Highlighter";
 export * from "./HtmlContentBlock";
 export * from "./OverflowText";
 export * from "./WhiteSpaceContainer";
+export * from "./InlineText";

package/src/components/Typography/stories/InlineText.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { InlineText } from "../InlineText";
+
+import overflowTextConfig from "./OverflowText.stories";
+
+const config = {
+    title: "Components/Typography/InlineText",
+    component: InlineText,
+    argTypes: {
+        children: overflowTextConfig.argTypes?.children,
+    },
+} as Meta<typeof InlineText>;
+export default config;
+
+const Template: StoryFn<typeof InlineText> = (args) => <InlineText {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: (
+        <div>
+            <div>Block line 1.</div>
+            <div>Block line 2.</div>
+        </div>
+    ),
+};

package/src/components/Typography/typography.scss

@@ -17,6 +17,11 @@ body {
     text-rendering: optimizelegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    // User-facing text may contain Unicode symbols (e.g. "★") that fall outside the primary font stack.
+    // Browsers pick different system fallback fonts for such characters, causing glyphs to render at
+    // different optical sizes (smaller in Firefox). font-size-adjust normalises the fallback font size
+    // by matching the primary font's x-height, reducing the visual size discrepancy across browsers.
+    font-size-adjust: from-font;
 }
 
 code {
@@ -68,6 +73,11 @@ mark {
     line-height: $eccgui-size-typo-caption-lineheight;
 }
 
+.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--large {
+    font-size: $eccgui-size-typo-subtitle;
+    line-height: $eccgui-size-typo-subtitle-lineheight;
+}
+
 h1 {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
@@ -223,9 +233,9 @@ table {
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
+    vertical-align: middle;
     overflow-wrap: normal;
     white-space: nowrap;
-    vertical-align: middle;
 }
 
 .#{$eccgui}-typography__overflowtext--inline {
@@ -241,8 +251,8 @@ table {
 }
 
 .#{$eccgui}-typography__overflowtext--ellipsis-reverse {
-    text-align: left;
     text-overflow: ellipsis;
+    text-align: left;
     direction: rtl;
     unicode-bidi: embed;
 
@@ -263,6 +273,22 @@ table {
     }
 }
 
+// InlineText
+
+.#{$eccgui}-typography__inlinetext {
+    display: inline;
+
+    * {
+        display: inline;
+
+        & + * {
+            &::before {
+                content: " ";
+            }
+        }
+    }
+}
+
 // helpers
 
 .#{$eccgui}-typography--nooverflow {

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,15 +1,14 @@
 import React, { useMemo, useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { defaultHighlightStyle, foldKeymap } from "@codemirror/language";
-import { EditorState, Extension, Compartment } from "@codemirror/state";
+import { Compartment,EditorState, Extension } from "@codemirror/state";
 import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
 import { minimalSetup } from "codemirror";
 
+import { Markdown } from "../../cmem/markdown/Markdown";
 import { IntentTypes } from "../../common/Intent";
 import { markField } from "../../components/AutoSuggestion/extensions/markText";
 import { TestableComponent } from "../../components/interfaces";
-import { MarkdownToolbar } from "./toolbars/markdown.toolbar";
-import { Markdown } from "../../cmem/markdown/Markdown";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 //hooks
@@ -31,9 +30,10 @@ import {
     adaptedLineNumbers,
     adaptedLintGutter,
     adaptedPlaceholder,
-    compartment,
     adaptedSyntaxHighlighting,
+    compartment,
 } from "./tests/codemirrorTestHelper";
+import { MarkdownToolbar } from "./toolbars/markdown.toolbar";
 import { ExtensionCreator } from "./types";
 
 export interface CodeEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "translate" | "onChange" | "onKeyDown" | "onMouseDown" | "onScroll">, TestableComponent {

package/src/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.ts

@@ -1,12 +1,11 @@
 //adapted v6 modes imports
+import {html} from "@codemirror/lang-html"
 import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
 import { markdown } from "@codemirror/lang-markdown";
 import { sql } from "@codemirror/lang-sql";
 import { xml } from "@codemirror/lang-xml";
 import { yaml } from "@codemirror/lang-yaml";
-import {html} from "@codemirror/lang-html"
-
 import { defaultHighlightStyle, LanguageSupport, StreamLanguage, StreamParser } from "@codemirror/language";
 //legacy mode imports
 import { jinja2 } from "@codemirror/legacy-modes/mode/jinja2";

package/src/extensions/codemirror/tests/codemirrorTestHelper.ts

@@ -7,10 +7,10 @@
  */
 //Todo this should become redundant with later patches that avoid this error
 
-import { EditorView, placeholder, highlightSpecialChars, lineNumbers, highlightActiveLine } from "@codemirror/view";
-import { syntaxHighlighting, foldGutter, codeFolding } from "@codemirror/language";
-import {Extension, Compartment, StateEffect, EditorState} from "@codemirror/state";
+import { codeFolding,foldGutter, syntaxHighlighting } from "@codemirror/language";
 import { lintGutter } from "@codemirror/lint";
+import {Compartment, EditorState,Extension, StateEffect} from "@codemirror/state";
+import { EditorView, highlightActiveLine,highlightSpecialChars, lineNumbers, placeholder } from "@codemirror/view";
 
 /** placeholder extension, current error '_view.placeholder is not a function' */
 export const adaptedPlaceholder = (text?: string) =>

package/src/extensions/react-flow/edges/EdgeNew.tsx

@@ -3,10 +3,11 @@ import {
     ConnectionLineComponentProps,
     ConnectionLineType,
 } from "@xyflow/react";
-import { EdgeStraight, EdgeStep, EdgeBezier, EdgeDefaultV12Props } from "./../index";
 
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 
+import { EdgeBezier, EdgeDefaultV12Props,EdgeStep, EdgeStraight } from "./../index";
+
 export const EdgeNew = (edgeNewProps: ConnectionLineComponentProps) => {
 
     const {

package/src/extensions/react-flow/handles/HandleDefault.tsx

@@ -1,7 +1,8 @@
 import React, { memo } from "react";
 import { Handle as HandleV9, HandleProps as ReactFlowHandleV9Props } from "react-flow-renderer";
-import { Handle as HandleV12, HandleProps as ReactFlowHandleV12Props } from "@xyflow/react";
 import { Classes as BlueprintClasses } from "@blueprintjs/core";
+import {Intent} from "@blueprintjs/core/src/common/intent";
+import { Handle as HandleV12, HandleProps as ReactFlowHandleV12Props } from "@xyflow/react";
 
 import { intentClassName, IntentTypes } from "../../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
@@ -9,7 +10,6 @@ import { TooltipProps } from "../../../index";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
 import { HandleContent, HandleContentProps } from "./HandleContent";
-import {Intent} from "@blueprintjs/core/src/common/intent";
 
 export type HandleCategory = "configuration" | "flexible" | "fixed" | "unknown" | "dependency";
 

package/src/extensions/react-flow/minimap/MiniMap.tsx

@@ -6,9 +6,10 @@ import {
 } from "react-flow-renderer";
 import { FlowTransform } from "react-flow-renderer/dist/types";
 
-import { miniMapUtils } from "./utils";
 import { ReacFlowVersionSupportProps, ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
+
 import { MiniMapV12, MiniMapV12Props } from "./MiniMapV12";
+import { miniMapUtils } from "./utils";
 
 export interface MiniMapBasicProps {
     /**

package/src/extensions/react-flow/minimap/MiniMapV12.tsx

@@ -1,8 +1,8 @@
 import React, { memo } from "react";
 import { MiniMap as ReactFlowMiniMap, MiniMapProps as ReactFlowMiniMapProps } from "@xyflow/react";
 
-import { miniMapUtils } from "./utils";
 import { MiniMapBasicProps } from "./MiniMap";
+import { miniMapUtils } from "./utils";
 
 export interface MiniMapV12Props extends MiniMapBasicProps, Omit<ReactFlowMiniMapProps, "maskColor"> {
 }

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -53,7 +53,8 @@
     border-radius: $reactflow-node-border-radius;
 
     &:hover {
-        box-shadow: 0 0 0 6 * $reactflow-node-border-width eccgui-color-rgba($reactflow-edge-stroke-color-selected, 0.05);
+        box-shadow: 0 0 0 6 * $reactflow-node-border-width
+            eccgui-color-rgba($reactflow-edge-stroke-color-selected, 0.05);
     }
 
     &.was-resized.is-resizable-vertical {
@@ -147,8 +148,10 @@
 
 .#{$eccgui}-graphviz__node__header-depiction,
 .#{$eccgui}-graphviz__node__header-menu {
+    display: flex;
     flex-grow: 0;
     flex-shrink: 0;
+    align-items: center;
     max-height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
     margin: 0 $eccgui-size-block-whitespace * 0.25;
 
@@ -158,8 +161,6 @@
 }
 
 .#{$eccgui}-graphviz__node__header-depiction {
-    display: flex;
-    align-items: center;
     justify-content: center;
 
     /* TODO: does not work correctly with tooltips around

package/src/extensions/react-flow/nodes/nodeUtils.tsx

@@ -2,6 +2,7 @@ import { CSSProperties } from "react";
 import {Node as NodeV9, XYPosition as XYPositionV9} from "react-flow-renderer";
 import {Node as NodeV12, XYPosition as XYPositionV12} from "@xyflow/react";
 import Color from "color";
+
 import {NodeDimensions} from "./NodeContent";
 
 interface StickyNoteBase {

package/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx

@@ -12,11 +12,11 @@ import {
     HtmlContentBlock,
     IconButton,
     MenuItem,
+    NodeContent,
+    NodeContentExtension,
     OverflowText,
     Tag,
     TagList,
-    NodeContent,
-    NodeContentExtension,
 } from "./../../../../index";
 import {
     Default as ContentExtensionExample,