@eccenca/gui-elements 24.4.1-featurepreparefinalnextcmem6943.2 → 25.0.0-featureimproveprintstylescmem6985.0

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

@@ -1,10 +1,10 @@
 import React from "react";
 import { OverlayProps as BlueprintOverlayProps, SpinnerProps as BlueprintSpinnerProps } from "@blueprintjs/core";
 import Color from "color";
+import { ButtonProps } from "./../Button/Button";
 type SpinnerPosition = "local" | "inline" | "global";
 type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit";
 type SpinnerStroke = "thin" | "medium" | "bold";
-type Intent = "primary" | "success" | "warning" | "danger";
 /** A spinner that is either displayed globally or locally. */
 export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "intent" | "color"> {
     /**
@@ -13,9 +13,16 @@ export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "inte
      */
     color?: Color | string | "inherit";
     /**
-     * Intent state of the field item.
+     * Intent state of the spinner.
+     * When used the spinner is colored.
+     * Property overwrites `elevated` setting.
      */
-    intent?: Intent;
+    intent?: ButtonProps["intent"];
+    /**
+     * Highlight the spinner.
+     * It is displayed with accent color intent.
+     */
+    elevated?: boolean;
     /**
      * Additional CSS class names.
      */
@@ -53,5 +60,5 @@ export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "inte
      */
     overlayProps?: BlueprintOverlayProps;
 }
-export declare const Spinner: ({ className, color, intent, position, size, stroke, showLocalBackdrop, delay, overlayProps, ...otherProps }: SpinnerProps) => React.JSX.Element | null;
+export declare const Spinner: ({ className, color, intent, elevated, position, size, stroke, showLocalBackdrop, delay, overlayProps, ...otherProps }: SpinnerProps) => React.JSX.Element | null;
 export default Spinner;

package/dist/types/components/Tabs/Tab.d.ts

@@ -31,8 +31,8 @@ export declare const transformTabProperties: ({ title, dontShrink, className, ba
     "data-testid"?: string;
     color?: string | undefined;
     slot?: string | undefined;
-    disabled?: boolean;
     children?: React.ReactNode;
+    disabled?: boolean;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -309,8 +309,8 @@ export declare const transformTabProperties: ({ title, dontShrink, className, ba
     "data-testid"?: string;
     color?: string | undefined;
     slot?: string | undefined;
-    disabled?: boolean;
     children?: React.ReactNode;
+    disabled?: boolean;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { DecodeHtmlEntitiesOptions } from "../../common";
 import { OverflowTextProps } from "./../Typography";
 export interface TextReducerProps extends Pick<React.HTMLAttributes<HTMLElement>, "children"> {
     /**
@@ -19,10 +20,21 @@ 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;
 }
 /**
  * Component to reduce HTML markup content to simple text.
  * Display can be wrapped easily in `OverflowText`.
  */
-export declare const TextReducer: ({ children, maxNodes, maxLength, useOverflowTextWrapper, overflowTextProps, }: TextReducerProps) => React.JSX.Element;
+export declare const TextReducer: ({ children, useOverflowTextWrapper, overflowTextProps, ...reduceToTextOptions }: TextReducerProps) => React.JSX.Element;
 export default TextReducer;

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

@@ -25,7 +25,7 @@ export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     fullWidth?: boolean;
     /**
-     * Label is diaplayed without a box that comes with borders and background color.
+     * Label is displayed without a box that comes with borders and background color.
      */
     loose?: boolean;
     /**

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.4.1-featurepreparefinalnextcmem6943.2",
+    "version": "25.0.0-featureimproveprintstylescmem6985.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -87,6 +87,7 @@
         "codemirror": "^6.0.1",
         "color": "^4.2.3",
         "compute-scroll-into-view": "^3.1.1",
+        "he": "^1.2.0",
         "jshint": "^2.13.6",
         "lodash": "^4.17.21",
         "n3": "^1.25.1",
@@ -134,6 +135,7 @@
         "@testing-library/react": "^12.1.5",
         "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
+        "@types/he": "^1.2.3",
         "@types/jest": "^29.5.14",
         "@types/jshint": "^2.12.4",
         "@types/lodash": "^4.17.16",
@@ -150,8 +152,8 @@
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^30.0.5",
-        "jest-environment-jsdom": "^30.0.5",
+        "jest": "^30.2.0",
+        "jest-environment-jsdom": "^30.2.0",
         "jest-pnp-resolver": "^1.2.3",
         "lint-staged": "^15.5.1",
         "node-sass-package-importer": "^5.3.3",

package/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -83,4 +83,4 @@ function firstNonEmptyLine(preview: string) {
 
 export const stringPreviewContentBlobTogglerUtils = {
     firstNonEmptyLine,
-};
+};

package/src/cmem/markdown/Markdown.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 // @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 rehypeExternalLinks from "rehype-external-links";
 import rehypeRaw from "rehype-raw";
 import { remarkDefinitionList } from "remark-definition-list";
@@ -55,7 +54,7 @@ const configDefault = {
         @see https://github.com/remarkjs/react-markdown#api
     */
     // @see https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
-    remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as PluggableList,
+    remarkPlugins: [remarkGfm, remarkDefinitionList] as PluggableList,
     // @see https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
     rehypePlugins: [] as PluggableList,
     allowedElements: [

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

@@ -40,7 +40,7 @@ export interface StickyNoteModalProps {
     /**
      * Forward other properties to the `SimpleModal` element that is used for this dialog.
      */
-    simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions">;
+    simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions" | "children">;
     /**
      * Code editor props
      */

package/src/cmem/react-flow/_minimap.scss

@@ -1,3 +1,13 @@
+.#{$eccgui}-graphviz__minimap__node--default {
+    &:not([fill]) {
+        fill: $reactflow-node-border-color;
+    }
+
+    &:not([stroke]) {
+        stroke: $reactflow-node-border-color;
+    }
+}
+
 @mixin mapnodestyles($type) {
     .#{$eccgui}-graphviz__minimap__node--#{$type} {
         @include mapcoloring($type);

package/src/cmem/react-flow/configuration/_colors-graph.scss

@@ -1,20 +1,20 @@
 .#{$eccgui}-configuration--colors__react-flow-graph {
-    --#{$eccgui}-graph-node: #{eccgui-color-var("layout", "purple", 700)};
-    --#{$eccgui}-graph-node-bright: #{eccgui-color-var("layout", "purple", 100)};
-    --#{$eccgui}-class-node: #{eccgui-color-var("layout", "magenta", 900)};
-    --#{$eccgui}-class-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
-    --#{$eccgui}-instance-node: #{eccgui-color-var("layout", "magenta", 500)};
-    --#{$eccgui}-instance-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-graph-node: #{eccgui-color-var("layout", "magenta", 900)};
+    --#{$eccgui}-graph-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-class-node: #{eccgui-color-var("layout", "purple", 700)};
+    --#{$eccgui}-class-node-bright: #{eccgui-color-var("layout", "purple", 100)};
+    --#{$eccgui}-instance-node: #{eccgui-color-var("layout", "purple", 500)};
+    --#{$eccgui}-instance-node-bright: #{eccgui-color-var("layout", "purple", 100)};
     --#{$eccgui}-property-node: #{eccgui-color-var("layout", "teal", 700)};
     --#{$eccgui}-property-node-bright: #{eccgui-color-var("layout", "teal", 100)};
     --#{$eccgui}-implicit-edge: #{eccgui-color-var("identity", "text", 700)};
     --#{$eccgui}-implicit-edge-bright: #{eccgui-color-var("identity", "text", 100)};
-    --#{$eccgui}-import-edge: #{eccgui-color-var("layout", "purple", 700)};
-    --#{$eccgui}-import-edge-bright: #{eccgui-color-var("layout", "purple", 100)};
-    --#{$eccgui}-subclass-edge: #{eccgui-color-var("layout", "magenta", 900)};
-    --#{$eccgui}-subclass-edge-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-import-edge: #{eccgui-color-var("layout", "magenta", 900)};
+    --#{$eccgui}-import-edge-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-subclass-edge: #{eccgui-color-var("layout", "purple", 700)};
+    --#{$eccgui}-subclass-edge-bright: #{eccgui-color-var("layout", "purple", 100)};
     --#{$eccgui}-subproperty-edge: #{eccgui-color-var("layout", "teal", 700)};
     --#{$eccgui}-subproperty-edge-bright: #{eccgui-color-var("layout", "teal", 100)};
-    --#{$eccgui}-rdftype-edge: #{eccgui-color-var("layout", "magenta", 500)};
-    --#{$eccgui}-rdftype-edge-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-rdftype-edge: #{eccgui-color-var("layout", "purple", 500)};
+    --#{$eccgui}-rdftype-edge-bright: #{eccgui-color-var("layout", "purple", 100)};
 }

package/src/cmem/react-flow/configuration/_colors-linking.scss

@@ -1,16 +1,16 @@
 .#{eccgui}-configuration--colors__react-flow-linking {
-    --#{$eccgui}-sourcepath-node: #{eccgui-color-var("layout", "violet", 700)};
-    --#{$eccgui}-sourcepath-node-bright: #{eccgui-color-var("layout", "violet", 100)};
-    --#{$eccgui}-targetpath-node: #{eccgui-color-var("layout", "cyan", 900)};
-    --#{$eccgui}-targetpath-node-bright: #{eccgui-color-var("layout", "cyan", 100)};
+    --#{$eccgui}-sourcepath-node: #{eccgui-color-var("layout", "purple", 700)};
+    --#{$eccgui}-sourcepath-node-bright: #{eccgui-color-var("layout", "purple", 300)};
+    --#{$eccgui}-targetpath-node: #{eccgui-color-var("layout", "petrol", 700)};
+    --#{$eccgui}-targetpath-node-bright: #{eccgui-color-var("layout", "petrol", 300)};
     --#{$eccgui}-transformation-node: #{eccgui-color-var("layout", "pink", 700)};
-    --#{$eccgui}-transformation-node-bright: #{eccgui-color-var("layout", "pink", 100)};
+    --#{$eccgui}-transformation-node-bright: #{eccgui-color-var("layout", "pink", 300)};
     --#{$eccgui}-comparator-node: #{eccgui-color-var("layout", "teal", 700)};
-    --#{$eccgui}-comparator-node-bright: #{eccgui-color-var("layout", "teal", 100)};
+    --#{$eccgui}-comparator-node-bright: #{eccgui-color-var("layout", "teal", 300)};
     --#{$eccgui}-aggregator-node: #{eccgui-color-var("layout", "cyan", 700)};
     --#{$eccgui}-aggregator-node-bright: #{eccgui-color-var("layout", "cyan", 100)};
     --#{$eccgui}-value-edge: #{eccgui-color-var("layout", "grey", 700)};
-    --#{$eccgui}-value-edge-bright: #{eccgui-color-var("layout", "grey", 100)};
+    --#{$eccgui}-value-edge-bright: #{eccgui-color-var("layout", "grey", 300)};
     --#{$eccgui}-score-edge: #{eccgui-color-var("layout", "cyan", 900)};
-    --#{$eccgui}-score-edge-bright: #{eccgui-color-var("layout", "cyan", 100)};
+    --#{$eccgui}-score-edge-bright: #{eccgui-color-var("layout", "cyan", 300)};
 }

package/src/cmem/react-flow/configuration/_colors-workflow.scss

@@ -1,16 +1,16 @@
 .#{$eccgui}-configuration--colors__react-flow-workflow {
     --#{$eccgui}-project-node: #{eccgui-color-var("layout", "magenta", 700)};
-    --#{$eccgui}-project-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
-    --#{$eccgui}-dataset-node: #{eccgui-color-var("layout", "cyan", 900)};
-    --#{$eccgui}-dataset-node-bright: #{eccgui-color-var("layout", "cyan", 100)};
-    --#{$eccgui}-linking-node: #{eccgui-color-var("layout", "teal", 900)};
-    --#{$eccgui}-linking-node-bright: #{eccgui-color-var("layout", "teal", 100)};
-    --#{$eccgui}-transform-node: #{eccgui-color-var("layout", "pink", 700)};
-    --#{$eccgui}-transform-node-bright: #{eccgui-color-var("layout", "pink", 100)};
+    --#{$eccgui}-project-node-bright: #{eccgui-color-var("layout", "magenta", 300)};
+    --#{$eccgui}-dataset-node: #{eccgui-color-var("layout", "petrol", 700)};
+    --#{$eccgui}-dataset-node-bright: #{eccgui-color-var("layout", "petrol", 300)};
+    --#{$eccgui}-linking-node: #{eccgui-color-var("layout", "cyan", 700)};
+    --#{$eccgui}-linking-node-bright: #{eccgui-color-var("layout", "cyan", 300)};
+    --#{$eccgui}-transform-node: #{eccgui-color-var("layout", "teal", 700)};
+    --#{$eccgui}-transform-node-bright: #{eccgui-color-var("layout", "teal", 300)};
     --#{$eccgui}-task-node: #{eccgui-color-var("layout", "lime", 700)};
-    --#{$eccgui}-task-node-bright: #{eccgui-color-var("layout", "lime", 100)};
+    --#{$eccgui}-task-node-bright: #{eccgui-color-var("layout", "lime", 300)};
     --#{$eccgui}-workflow-node: #{eccgui-color-var("layout", "purple", 700)};
-    --#{$eccgui}-workflow-node-bright: #{eccgui-color-var("layout", "purple", 100)};
-    --#{$eccgui}-replaceableInput: #{eccgui-color-var("layout", "amber", 700)};
-    --#{$eccgui}-replaceableInput-bright: #{eccgui-color-var("layout", "amber", 100)};
+    --#{$eccgui}-workflow-node-bright: #{eccgui-color-var("layout", "purple", 300)};
+    --#{$eccgui}-replaceable-input: #{eccgui-color-var("layout", "amber", 700)};
+    --#{$eccgui}-replaceable-input-bright: #{eccgui-color-var("layout", "amber", 300)};
 }

package/src/common/index.ts

@@ -1,3 +1,5 @@
+import { decode } from "he";
+
 import { invisibleZeroWidthCharacters } from "./utils/characters";
 import { colorCalculateDistance } from "./utils/colorCalculateDistance";
 import decideContrastColorValue from "./utils/colorDecideContrastvalue";
@@ -6,6 +8,8 @@ import getColorConfiguration from "./utils/getColorConfiguration";
 import { getScrollParent } from "./utils/getScrollParent";
 import { getGlobalVar, setGlobalVar } from "./utils/globalVars";
 import { openInNewTab } from "./utils/openInNewTab";
+import { reduceToText } from "./utils/reduceToText";
+export type { DecodeOptions as DecodeHtmlEntitiesOptions } from "he";
 export type { IntentTypes as IntentBaseTypes } from "./Intent";
 
 export const utils = {
@@ -19,4 +23,6 @@ export const utils = {
     getScrollParent,
     getEnabledColorsFromPalette,
     textToColorHash,
+    reduceToText,
+    decodeHtmlEntities: decode,
 };

package/src/common/scss/_color-functions.scss

@@ -86,6 +86,11 @@
  * Created to replace them easily for CSS custom properties.
  */
 @function eccgui-color-rgba($color, $alpha) {
+    @if meta.type-of($alpha) != "number" {
+        // in case it is for example a CSS custom property
+        @return eccgui-color-mix($color $alpha, transparent);
+    }
+
     @if $alpha > 0 {
         @return eccgui-color-mix($color 100% * $alpha, transparent);
     } @else {

package/src/common/utils/reduceToText.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { renderToString } from "react-dom/server";
+import * as ReactIs from "react-is";
+
+import { TextReducerProps } from "./../../components/TextReducer/TextReducer";
+import { DecodeHtmlEntitiesOptions, utils } from "./../";
+
+export interface ReduceToTextFuncType {
+    (
+        /**
+         *  Component or text to reduce HTML markup content to plain text.
+         */
+        input: React.ReactNode | React.ReactNode[] | string,
+        options?: Pick<TextReducerProps, "maxNodes" | "maxLength" | "decodeHtmlEntities" | "decodeHtmlEntitiesOptions">
+    ): string;
+}
+
+export const reduceToText: ReduceToTextFuncType = (input, options) => {
+    const { maxNodes, maxLength, decodeHtmlEntities } = options || {};
+    const content: React.ReactNode | React.ReactNode[] = input;
+    let nodeCount = 0;
+
+    const onlyText = (nodes: React.ReactNode | React.ReactNode[]): string => {
+        if (typeof maxNodes !== "undefined" && nodeCount >= maxNodes) return "";
+
+        return React.Children.toArray(nodes)
+            .slice(0, maxNodes)
+            .map((child) => {
+                if (typeof maxNodes !== "undefined" && nodeCount >= maxNodes) return "";
+
+                if (ReactIs.isFragment(child)) return onlyText(child.props?.children);
+                if (typeof child === "string" || typeof child === "number") {
+                    nodeCount++;
+                    return child.toString();
+                }
+                if (ReactIs.isElement(child)) {
+                    nodeCount++;
+                    return renderToString(<span>{child}</span>);
+                }
+                return "";
+            })
+            .join(" ");
+    };
+
+    let text = typeof content === "string" ? content : onlyText(content);
+
+    // Basic HTML cleanup
+    text = text.replace(/<[^\s][^>]*>/g, "").replace(/\n/g, " ");
+
+    if (decodeHtmlEntities) {
+        const decodeDefaultOptions = {
+            isAttributeValue: true,
+            strict: true,
+        } as DecodeHtmlEntitiesOptions;
+        let decodeErrors = 0;
+        // we decode in pieces to apply some error tolerance even in strict mode
+        text = text
+            .split(" ")
+            .map((value) => {
+                try {
+                    return utils.decodeHtmlEntities(value, {
+                        ...decodeDefaultOptions,
+                        ...options?.decodeHtmlEntitiesOptions,
+                    });
+                } catch {
+                    decodeErrors++;
+                    return value;
+                }
+            })
+            .join(" ");
+        if (decodeErrors > 0) {
+            // eslint-disable-next-line no-console
+            console.warn(`${decodeErrors} parse error(s) for decodeHtmlEntities, return un-decoded text`, text);
+        }
+    }
+
+    if (typeof maxLength === "number") {
+        text = text.slice(0, maxLength);
+    }
+
+    return text.trim();
+};

package/src/components/Application/ApplicationViewability.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import classNames from "classnames";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+type media = "print" | "screen";
+
+interface ApplicationViewabilityShow {
+    /**
+     * Show on media type.
+     * If used, `hide` cannot be set.
+     */
+    show: media;
+    hide?: never;
+}
+
+interface ApplicationViewabilityHide {
+    /**
+     * Hide on media type.
+     * If used, `show` cannot be set.
+     */
+    hide: media;
+    show?: never;
+}
+
+interface ApplicationViewabilityUndecided {
+    /**
+     * Only one child allowed.
+     * Need to process the `className` property.
+     */
+    children: React.ReactElement<{ className?: string }>;
+}
+
+export type ApplicationViewabilityProps = ApplicationViewabilityUndecided &
+    (ApplicationViewabilityShow | ApplicationViewabilityHide);
+
+/**
+ * Sets the viewability of the the contained element regarding media.
+ * Can be used to hide elements, e.g. when the page is printed.
+ */
+export const ApplicationViewability = ({ children, show, hide }: ApplicationViewabilityProps) => {
+    if (!show && !hide) {
+        return children;
+    }
+    if (show === hide) {
+        // eslint-disable-next-line no-console
+        console.warn("`<ApplicationViewability/>` used with same media type for `hide` and `show`.");
+        return children;
+    }
+
+    const enhancedClone = React.cloneElement(children, {
+        className: classNames(children.props.className, {
+            [`${eccgui}-application__hide--${hide}`]: hide,
+            [`${eccgui}-application__show--${show}`]: show,
+        }),
+    });
+
+    return enhancedClone;
+};
+
+export default ApplicationViewability;

package/src/components/Application/_content.scss

@@ -25,3 +25,10 @@ $ui-02: $eccgui-color-workspace-background !default;
 .#{$eccgui}-application__content--railsidebar {
     margin-left: mini-units(8);
 }
+
+@media print {
+    .#{$eccgui}-application__content {
+        padding: $eccgui-size-block-whitespace 0 0 0 !important;
+        margin: 0;
+    }
+}

package/src/components/Application/_header.scss

@@ -98,10 +98,10 @@ span.#{$prefix}--header__name {
 .#{$eccgui}-application__title--content {
     display: inline-block;
     overflow: hidden;
+    text-overflow: ellipsis;
     font-size: $eccgui-size-typo-caption;
     font-weight: $eccgui-font-weight-bold;
     line-height: $eccgui-size-typo-caption-lineheight;
-    text-overflow: ellipsis;
     letter-spacing: $eccgui-font-spacing-wide;
     white-space: nowrap;
 }
@@ -122,7 +122,7 @@ span.#{$prefix}--header__name {
         height: auto;
         max-height: mini-units(5);
         padding: 0;
-        margin: mini-units(1.4) 0 mini-units(1.6) 0;
+        margin: mini-units(1.4) 0 mini-units(1.6);
         vertical-align: middle;
     }
 }
@@ -195,9 +195,9 @@ a.#{$prefix}--header__menu-item:active {
 .#{$prefix}--header__action.#{$prefix}--btn--primary:focus,
 a.#{$prefix}--header__name:focus,
 a.#{$prefix}--header__menu-item:focus {
-    border: none;
     outline: 1px dotted $shell-header-focus;
     outline-offset: -1px;
+    border: none;
     box-shadow: none;
 }
 .#{$prefix}--header__menu-title[aria-expanded="true"] {
@@ -267,3 +267,12 @@ a.#{$prefix}--header__menu-item:focus > svg {
         margin: 0;
     }
 }
+
+@media print {
+    .#{$eccgui}-application__header {
+        position: relative;
+        & > :not(.#{$eccgui}-workspace__header) {
+            display: none;
+        }
+    }
+}

package/src/components/Application/_viewability.scss

@@ -0,0 +1,13 @@
+@media print {
+    .#{eccgui}-application__hide--print,
+    .#{eccgui}-application__show--screen {
+        display: none !important;
+    }
+}
+
+@media screen {
+    .#{eccgui}-application__hide--screen,
+    .#{eccgui}-application__show--print {
+        display: none !important;
+    }
+}

package/src/components/Application/application.scss

@@ -10,3 +10,4 @@
 // @import '~@carbon/react/scss/components/ui-shell/navigation-menu';
 @import "content";
 @import "dropzone";
+@import "viewability";

package/src/components/Application/index.ts

@@ -8,4 +8,5 @@ export * from "./ApplicationToolbar";
 export * from "./ApplicationToolbarSection";
 export * from "./ApplicationToolbarAction";
 export * from "./ApplicationToolbarPanel";
+export * from "./ApplicationViewability";
 export * from "./helper";

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ApplicationViewability } from "../../../index";
+export default {
+    title: "Components/Application/Viewability",
+    component: ApplicationViewability,
+    argTypes: {
+        children: {
+            control: false,
+        },
+        hide: {
+            control: {
+                type: "radio",
+            },
+            options: ["print", "screen"],
+        },
+        show: {
+            control: {
+                type: "radio",
+            },
+            options: ["print", "screen"],
+        },
+    },
+} as Meta<typeof ApplicationViewability>;
+
+const TemplateBasicExample: StoryFn<typeof ApplicationViewability> = (args) => <ApplicationViewability {...args} />;
+
+export const Default = TemplateBasicExample.bind({});
+Default.args = {
+    children: (
+        <div>
+            <LoremIpsum random={false} />
+        </div>
+    ),
+};

package/src/components/Application/tests/ApplicationViewability.test.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { expect } from "@storybook/test";
+import { render } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { ApplicationViewability, ApplicationViewabilityProps, CLASSPREFIX as eccgui } from "../../../index";
+
+import { Default as ApplicationViewabilityStory } from "./../stories/ApplicationViewability.stories";
+
+const applyViewabilityAndCheckClass = (props: Omit<ApplicationViewabilityProps, "children">) => {
+    const { container } = render(<ApplicationViewability {...ApplicationViewabilityStory.args} {...props} />);
+    const element = container.getElementsByClassName(
+        props.hide ? `${eccgui}-application__hide--${props.hide}` : `${eccgui}-application__show--${props.show}`
+    );
+    expect(element.length).toBe(1);
+    return element;
+};
+
+describe("ApplicationViewability", () => {
+    it("should be visible on `show=screen`", () => {
+        applyViewabilityAndCheckClass({ show: "screen" });
+        /**
+         * Currently we cannot really test visibility via jest if it is defined by S/CSS rules because those styles are not known.
+         * Looks like it is not too easy to include and test them.
+         * So we only test for the correct CSS class.
+         */
+        // console.log(window.getComputedStyle(element.item(0)??new Element).getPropertyValue("display"));
+        // waitFor(() => expect(element).toBeVisible());
+    });
+    it("should not be visible on `hide=screen`", () => {
+        applyViewabilityAndCheckClass({ hide: "screen" });
+        // waitFor(() => expect(element).not.toBeVisible());
+    });
+    it("should be visible on `hide=print`", () => {
+        applyViewabilityAndCheckClass({ hide: "print" });
+        // waitFor(() => expect(element).toBeVisible());
+    });
+    it("should not be visible on `show=print`", () => {
+        applyViewabilityAndCheckClass({ show: "print" });
+        // waitFor(() => expect(element).not.toBeVisible());
+    });
+});

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -494,6 +494,7 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
             query={query}
             // This leads to odd compile errors without "as any"
             popoverProps={updatedContextOverlayProps as any}
+            popoverContentProps={{className: "nodrag"}}
             selectedItem={selectedItem}
             fill={fill}
             {...createNewItemProps}