Merge branch 'develop' into change/upgradedToReact18-CMEM-6639

# Conflicts:
#	src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

Author: andreas-schultz

.github/workflows/create-release-branch.yml

@@ -22,7 +22,7 @@ jobs:
       - uses: actions/checkout@main
       - uses: actions/setup-node@main
         with:
-          node-version: "18"
+          node-version: "lts/krypton"
       - name: Check and save dispatched branch
         id: dispatched-branch
         run: |

.github/workflows/deployment-storybook.yml

@@ -5,15 +5,19 @@ on:
     paths:
       - "src/**"
       - ".storybook/**"
+      - ".github/workflows/deployment-storybook.yml"
       - "index.ts"
+      - package.json
       - yarn.lock
   push:
     branches:
       - "develop"
     paths:
       - "src/**"
       - ".storybook/**"
+      - ".github/workflows/deployment-storybook.yml"
       - "index.ts"
+      - package.json
       - yarn.lock
 
 jobs:
@@ -33,7 +37,7 @@ jobs:
           git log --oneline -1
       - uses: actions/setup-node@main
         with:
-          node-version: "18"
+          node-version: "lts/krypton"
       - name: Install dependencies
         run: yarn install
       - name: Create jest results

.github/workflows/publish-featurefix-prerelease.yml

@@ -42,7 +42,7 @@ jobs:
           git config user.email "${{ github.actor }}@users.noreply.github.com"
       - uses: actions/setup-node@main
         with:
-          node-version: "18"
+          node-version: "lts/krypton"
       - name: Create pre-release version number
         run: |
           preid=$(echo ${{ steps.branch-name.outputs.current_branch }} | tr '[:upper:]' '[:lower:]' | sed 's=[^[:alnum:][:space:]"]==g')

.github/workflows/publish-final-release.yml

@@ -43,7 +43,7 @@ jobs:
           git config user.email "${{ github.actor }}@users.noreply.github.com"
       - uses: actions/setup-node@main
         with:
-          node-version: "18"
+          node-version: "lts/krypton"
       - name: Get version
         id: package-version
         run: echo "version=$(node -p -e "require('./package.json').version.split('-').shift()")" >> $GITHUB_OUTPUT

.github/workflows/publish-release-candidate.yml

@@ -39,7 +39,7 @@ jobs:
           git config user.email "${{ github.actor }}@users.noreply.github.com"
       - uses: actions/setup-node@main
         with:
-          node-version: "18"
+          node-version: "lts/krypton"
       - name: Create release candidate version number
         run: |
           preid="rc"

.github/workflows/push-tagged-release.yml

@@ -36,7 +36,7 @@ jobs:
           ref: ${{ inputs.ref }}
       - uses: actions/setup-node@main
         with:
-          node-version: "18"
+          node-version: "lts/krypton"
           registry-url: "https://registry.npmjs.org"
       - name: Set name vars
         id: info-vars

.github/workflows/test-code.yml

@@ -3,6 +3,7 @@ name: "🧪 Test: code"
 on:
   pull_request:
     paths:
+      - ".github/workflows/test-code.yml"
       - "src/**.js"
       - "src/**.ts"
       - "src/**.tsx"
@@ -19,7 +20,7 @@ jobs:
       - name: Test using Node.js
         uses: actions/setup-node@main
         with:
-          node-version: "18"
+          node-version: "lts/krypton"
       - run: yarn install
       - run: yarn compile
       - run: yarn compile-scss

CHANGELOG.md

@@ -6,6 +6,43 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Added
+
+-   `<ApplicationViewability />`
+    -   component for hiding elements in specific media
+-   `<InlineText />`
+    -    force children to get displayed as inline content
+-   `<StringPreviewContentBlobToggler />`
+    - `useOnly` property: specify if only parts of the content should be used for the shortened preview, this property replaces `firstNonEmptyLineOnly`
+
+### Fixed
+
+-   `<Tag />`
+    -   create more whitespace inside `small` tag
+    -   reduce visual impact of border
+-   `<StringPreviewContentBlobToggler />`
+    -    take Markdown rendering into account before testing the maximum preview length
+-   `<NodeContent />`
+    -   header-menu items are vertically centered now
+
+### Changed
+
+-   automatically hide user interaction elements in print view
+    -   all application header components except `<WorkspaceHeader />`
+    -   `<CardActions />` and `<CardOptions />`
+    -   `actionOptions` of `<ContentGroup />`
+    -   `actions` of `<Notification />`
+    -   `<OverviewItemActions />`
+-   automatically serialize display of layout elements in print view
+    -   `<FlexibleLayoutItem />`
+    -   `<GridColumn />`
+    -   `<PropertyName />` and `<PropertyValue />`
+
+### Deprecated
+
+-   `<StringPreviewContentBlobToggler />`
+    -    `firstNonEmptyLineOnly` will be removed, is replaced by `useOnly="firstNonEmptyLine"`
+
 ## [25.0.0] - 2025-12-01
 
 This is a major release, and it might be not compatible with your current usage of our library. Please read about the necessary changes in the section about how to migrate.

src/cmem/ContentBlobToggler/ContentBlobToggler.tsx

@@ -58,7 +58,7 @@ export function ContentBlobToggler({
                     {previewContent}
                     {enableToggler && (
                         <>
-                            &hellip;{" "}
+                            {" "}&hellip;{" "}
                             <Link
                                 href="#more"
                                 data-test-id={"content-blob-toggler-more-link"}

src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -1,30 +1,46 @@
 import React from "react";
 
-import { ContentBlobToggler, ContentBlobTogglerProps, Markdown } from "./..";
+import { ContentBlobToggler, ContentBlobTogglerProps, InlineText, Markdown, utils } from "./../../index";
 
 export interface StringPreviewContentBlobTogglerProps
     extends Omit<ContentBlobTogglerProps, "previewContent" | "enableToggler"> {
     /**
-     The preview content will be cut to this length if it is too long.
+     * The preview content will be cut to this length if it is too long.
      */
     previewMaxLength?: number;
     /**
-     The content string. If it is smaller than previewMaxLength this will be displayed in full, else fullviewContent will be displayed.
+     * The content string.
+     * If it is smaller than `previewMaxLength` this will be displayed in full, else `fullviewContent` will be displayed.
      */
     content: string;
-    /** If only the first non-empty line should be shown in the preview. This will in addition also be shortened according to previewMaxLength. */
-    firstNonEmptyLineOnly?: boolean;
-    /** If enabled the preview is rendered as markdown. */
+    /**
+     * Use only parts of `content` in the preview.
+     * `firstMarkdownSection` uses the content until the first double line return.
+     * Currently overwritten by `firstNonEmptyLineOnly`.
+     */
+    useOnly?: "firstNonEmptyLine" | "firstMarkdownSection";
+    /**
+     * If enabled the preview is rendered as Markdown.
+     */
     renderPreviewAsMarkdown?: boolean;
-    /** White-listing of HTML elements that will be rendered when renderPreviewAsMarkdown is enabled. */
+    /**
+     * White-listing of HTML elements that will be rendered when renderPreviewAsMarkdown is enabled.
+     */
     allowedHtmlElementsInPreview?: string[];
-    /** Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary.
+    /**
+     * Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary.
      * This allows to add non-string elements to both the full-view content and the pure string content.
      */
     noTogglerContentSuffix?: React.JSX.Element;
+    /**
+     * If only the first non-empty line should be shown in the preview.
+     * This will in addition also be shortened according to `previewMaxLength`.
+     * @deprecated (v26) use `useOnly="firstNonEmptyLine"` instead
+     */
+    firstNonEmptyLineOnly?: boolean;
 }
 
-/** Version of the content toggler for text only content. */
+/** Version of the content toggler for text centric content. */
 export function StringPreviewContentBlobToggler({
     className = "",
     previewMaxLength,
@@ -33,21 +49,44 @@ export function StringPreviewContentBlobToggler({
     content,
     fullviewContent,
     startExtended,
-    firstNonEmptyLineOnly,
+    useOnly,
     renderPreviewAsMarkdown = false,
     allowedHtmlElementsInPreview,
     noTogglerContentSuffix,
+    firstNonEmptyLineOnly,
 }: StringPreviewContentBlobTogglerProps) {
-    const previewMaybeFirstLine = firstNonEmptyLineOnly ? firstNonEmptyLine(content) : content;
-    const previewString = previewMaxLength ? previewMaybeFirstLine.substr(0, previewMaxLength) : previewMaybeFirstLine;
-    const enableToggler = previewString !== content;
+    // need to test `firstNonEmptyLineOnly` until property is removed
+    const useOnlyTest: StringPreviewContentBlobTogglerProps["useOnly"] = firstNonEmptyLineOnly
+        ? "firstNonEmptyLine"
+        : useOnly;
+
+    let previewString = content;
+    switch (useOnlyTest) {
+        case "firstNonEmptyLine":
+            previewString = useOnlyPart(content, regexFirstNonEmptyLine);
+            break;
+        case "firstMarkdownSection":
+            previewString = useOnlyPart(content, regexFirstMarkdownSection);
+    }
+
+    let enableToggler = previewString !== content;
+
     let previewContent = renderPreviewAsMarkdown ? (
         <Markdown key="markdown-content" allowedElements={allowedHtmlElementsInPreview}>
             {previewString}
         </Markdown>
     ) : (
         previewString
     );
+
+    if (
+        previewMaxLength &&
+        utils.reduceToText(previewContent, { decodeHtmlEntities: true }).length > previewMaxLength
+    ) {
+        previewContent = utils.reduceToText(previewContent, { decodeHtmlEntities: true }).slice(0, previewMaxLength);
+        enableToggler = true;
+    }
+
     if (!enableToggler && noTogglerContentSuffix) {
         previewContent = (
             <>
@@ -60,7 +99,7 @@ export function StringPreviewContentBlobToggler({
     return (
         <ContentBlobToggler
             className={className}
-            previewContent={previewContent}
+            previewContent={<InlineText>{previewContent}</InlineText>}
             toggleExtendText={toggleExtendText}
             toggleReduceText={toggleReduceText}
             fullviewContent={fullviewContent}
@@ -70,17 +109,26 @@ export function StringPreviewContentBlobToggler({
     );
 }
 
-const newLineRegex = new RegExp("\r|\n"); // eslint-disable-line
+const regexFirstNonEmptyLine = new RegExp("\r|\n"); // eslint-disable-line
+const regexFirstMarkdownSection = new RegExp("\r\n\r\n|\n\n"); // eslint-disable-line
 
 /**
  * Takes the first non-empty line from a preview string.
  */
 function firstNonEmptyLine(preview: string) {
+    return useOnlyPart(preview, regexFirstNonEmptyLine);
+}
+
+/**
+ * Returns only the first part from a preview string.
+ * Or the full string as fallback.
+ */
+function useOnlyPart(preview: string, regexTest: RegExp): string {
     const previewString = preview.trim();
-    const result = newLineRegex.exec(previewString);
-    return result !== null ? previewString.substr(0, result.index) : previewString;
+    const result = regexTest.exec(previewString);
+    return result !== null ? result.input.slice(0, result.index) : previewString;
 }
 
 export const stringPreviewContentBlobTogglerUtils = {
     firstNonEmptyLine,
-};
+};