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

package/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -18,6 +18,10 @@ export interface StringPreviewContentBlobTogglerProps
     renderPreviewAsMarkdown?: boolean;
     /** 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.
+     * This allows to add non-string elements to both the full-view content and the pure string content.
+     */
+    noTogglerContentSuffix?: JSX.Element;
 }
 
 /** Version of the content toggler for text only content. */
@@ -32,21 +36,31 @@ export function StringPreviewContentBlobToggler({
     firstNonEmptyLineOnly,
     renderPreviewAsMarkdown = false,
     allowedHtmlElementsInPreview,
+    noTogglerContentSuffix,
 }: StringPreviewContentBlobTogglerProps) {
     const previewMaybeFirstLine = firstNonEmptyLineOnly ? firstNonEmptyLine(content) : content;
     const previewString = previewMaxLength ? previewMaybeFirstLine.substr(0, previewMaxLength) : previewMaybeFirstLine;
     const enableToggler = previewString !== content;
+    let previewContent = renderPreviewAsMarkdown ? (
+        <Markdown key="markdown-content" allowedElements={allowedHtmlElementsInPreview}>
+            {previewString}
+        </Markdown>
+    ) : (
+        previewString
+    );
+    if (!enableToggler && noTogglerContentSuffix) {
+        previewContent = (
+            <>
+                {previewContent}
+                {noTogglerContentSuffix}
+            </>
+        );
+    }
 
     return (
         <ContentBlobToggler
             className={className}
-            previewContent={
-                renderPreviewAsMarkdown ? (
-                    <Markdown allowedElements={allowedHtmlElementsInPreview}>{previewString}</Markdown>
-                ) : (
-                    previewString
-                )
-            }
+            previewContent={previewContent}
             toggleExtendText={toggleExtendText}
             toggleReduceText={toggleReduceText}
             fullviewContent={fullviewContent}
@@ -60,9 +74,8 @@ const newLineRegex = new RegExp("\r|\n"); // eslint-disable-line
 
 /**
  * Takes the first non-empty line from a preview string.
- * @deprecated use `stringPreviewContentBlobTogglerUtils.firstNonEmptyLine`
  */
-export function firstNonEmptyLine(preview: string) {
+function firstNonEmptyLine(preview: string) {
     const previewString = preview.trim();
     const result = newLineRegex.exec(previewString);
     return result !== null ? previewString.substr(0, result.index) : previewString;

package/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx

@@ -2,9 +2,15 @@ import React, { useEffect, useState } from "react";
 
 import { TestableComponent } from "../../components/interfaces";
 
-// @deprecated use `ElapsedDateTimeDisplayUnits`
-export type TimeUnits = "second" | "seconds" | "minute" | "minutes" | "hour" | "hours" | "day" | "days";
-export type ElapsedDateTimeDisplayUnits = TimeUnits;
+export type ElapsedDateTimeDisplayUnits =
+    | "second"
+    | "seconds"
+    | "minute"
+    | "minutes"
+    | "hour"
+    | "hours"
+    | "day"
+    | "days";
 
 export interface ElapsedDateTimeDisplayProps extends TestableComponent {
     // The date time given as string (parseable by Date) or number (ms since 1970-01-01 00:00:00 UTC)
@@ -28,9 +34,8 @@ const dateTimeToElapsedTimeInMs = (dateTime: string | number) => {
 
 /**
  * Returns a segmentation of the elapsed time, i.e. an array with the nr of days, hours, minutes, seconds
- * @deprecated moved to `elapsedDateTimeDisplayUtils.elapsedTimeSegmented`
  */
-export const elapsedTimeSegmented = (elapsedTimeInMs: number): number[] => {
+const elapsedTimeSegmented = (elapsedTimeInMs: number): number[] => {
     // In how many segments the time should be split, i.e. hours, minutes, seconds
     const segmentSteps = [24, 60, 60];
     // First convert to time in seconds
@@ -47,9 +52,8 @@ export const elapsedTimeSegmented = (elapsedTimeInMs: number): number[] => {
 
 /**
  * Returns the simplified elapsed time
- * @deprecated moved to `elapsedDateTimeDisplayUtils.simplifiedElapsedTime`
  */
-export const simplifiedElapsedTime = (
+const simplifiedElapsedTime = (
     timeSegments: number[],
     translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string,
     includeSeconds = false

package/src/cmem/DateTimeDisplay/tests/ElapsedDateTimeDisplay.test.tsx

@@ -1,12 +1,17 @@
-import { elapsedTimeSegmented, simplifiedElapsedTime, TimeUnits } from "../ElapsedDateTimeDisplay";
+import { ElapsedDateTimeDisplayUnits, elapsedDateTimeDisplayUtils } from "../../../../index";
 
 describe("Elapsed time component", () => {
     const checkMS = (timeInMs: number, expectedString: string) =>
-        expect(elapsedTimeSegmented(timeInMs).join(":")).toBe(expectedString);
+        expect(elapsedDateTimeDisplayUtils.elapsedTimeSegmented(timeInMs).join(":")).toBe(expectedString);
     const checkS = (timeInSeconds: number, expectedString: string) => checkMS(timeInSeconds * 1000, expectedString);
-    const translate = (timeUnit: TimeUnits) => timeUnit;
+    const translate = (timeUnit: ElapsedDateTimeDisplayUnits) => timeUnit;
     const checkHumanReadable = (timeInSeconds: number, expectedString: string) =>
-        expect(simplifiedElapsedTime(elapsedTimeSegmented(timeInSeconds * 1000), translate)).toBe(expectedString);
+        expect(
+            elapsedDateTimeDisplayUtils.simplifiedElapsedTime(
+                elapsedDateTimeDisplayUtils.elapsedTimeSegmented(timeInSeconds * 1000),
+                translate
+            )
+        ).toBe(expectedString);
     it("should segment the time", () => {
         checkMS(2123, "0:0:0:2");
         checkS(2, "0:0:0:2");

package/src/cmem/markdown/Markdown.tsx

@@ -42,8 +42,6 @@ export interface MarkdownProps extends TestableComponent {
      */
     linkTargetName?: false | string;
 }
-/* @deprecated use `MarkdownProps` */
-export type MarkdownParserProps = MarkdownProps;
 
 const configDefault = {
     /*

package/src/cmem/markdown/highlightSearchWords.test.ts

@@ -1,12 +1,12 @@
 import { Element, Parent, Root, Text } from "hast";
 import { VFile } from "vfile";
 
-import highlightSearchWordsPluginFactory from "./highlightSearchWords";
+import { markdownUtils } from "../../../index";
 
 describe("Highlight search words reHype plugin", () => {
     it("should highlight search words", () => {
         const searchQuery = "abc xyz";
-        const highlightSearchWordsPlugin = highlightSearchWordsPluginFactory(searchQuery);
+        const highlightSearchWordsPlugin = markdownUtils.highlightSearchWordsPluginFactory(searchQuery);
         const highlightSearchWordTransformer = highlightSearchWordsPlugin();
         const textNode = (text: string): Text => ({ type: "text", value: text });
         const markNode = (text: string): Element => ({ type: "element", tagName: "mark", children: [textNode(text)] });
@@ -22,6 +22,7 @@ describe("Highlight search words reHype plugin", () => {
                 ],
             },
             new VFile(),
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
             () => {}
         );
         const rootChildren = (result as Root).children;

package/src/cmem/markdown/highlightSearchWords.ts

@@ -4,7 +4,10 @@ import { Node } from "unist";
 
 import { highlighterUtils } from "../../components/Typography/Highlighter";
 
-const highlightSearchWordsPluginFactoryFn = (searchQuery: string | undefined) => {
+/**
+ * Creates a react-markdown reHype plugin that marks text based on a multi-word search query.
+ */
+const highlightSearchWordsPluginFactory = (searchQuery: string | undefined) => {
     const searchStringParts = searchQuery ? highlighterUtils.extractSearchWords(searchQuery) : [];
     const multiWordRegex = highlighterUtils.createMultiWordRegex(searchStringParts);
     const createTextNode = (text: string): Text => ({ type: "text", value: text });
@@ -65,14 +68,6 @@ const highlightSearchWordsPluginFactoryFn = (searchQuery: string | undefined) =>
     };
 };
 
-/**
- * Creates a react-markdown reHype plugin that marks text based on a multi-word search query.
- * @deprecated moved to `markdownUtils.highlightSearchWordsPluginFactory`
- */
-const highlightSearchWordsPluginFactory = highlightSearchWordsPluginFactoryFn;
-
-export default highlightSearchWordsPluginFactory;
-
 export const markdownUtils = {
-    highlightSearchWordsPluginFactory: highlightSearchWordsPluginFactoryFn,
+    highlightSearchWordsPluginFactory,
 };

package/src/cmem/markdown/markdown.scss

@@ -47,13 +47,16 @@
 
 .#{$eccgui}-typography__contentblock {
     a[href=""] {
+        color: currentcolor;
+        pointer-events: none;
+        cursor: text;
+    }
+
+    a[href=""]:not(#{$eccgui-selector-text-spot-highlight}) {
         font-size: $eccgui-size-typo-caption;
         line-height: $eccgui-size-typo-caption-lineheight;
-        color: currentcolor;
         text-decoration: none;
         vertical-align: super;
-        pointer-events: none;
-        cursor: text;
 
         &::before {
             content: "[";

package/src/cmem/markdown/markdown.utils.ts

@@ -0,0 +1,18 @@
+/** Extracts the values of all named anchors used in the Markdown string, i.e. of the form <mark name="<value>"></mark>. */
+const extractNamedAnchors = (markdown: string): string[] => {
+    const regex = new RegExp('<a\\s+id="([^"]+)"\\s*>[^<]*</a>', "g");
+    const namedAnchors: string[] = [];
+
+    let results = regex.exec(markdown);
+    while (results !== null) {
+        namedAnchors.push(results[1]);
+        results = regex.exec(markdown);
+    }
+    return namedAnchors;
+};
+
+const utils = {
+    extractNamedAnchors,
+};
+
+export default utils;

package/src/cmem/markdown/markdownutils.test.ts

@@ -0,0 +1,17 @@
+import utils from "./markdown.utils";
+
+describe("Markdown utils", () => {
+    it("should extract named anchors from the Markdown", () => {
+        const namedAnchors = utils.extractNamedAnchors(
+            '# Header\n\nsome text\n\n## <a  id="anchor1" ></a> point 1\n\n## <a id="anchor2"></a> point 2'
+        );
+        expect(namedAnchors).toStrictEqual(["anchor1", "anchor2"]);
+    });
+
+    it("should not extract named anchors from the Markdown that are not following the expected format", () => {
+        const namedAnchors = utils.extractNamedAnchors(
+            '# <a id="anchor" href="http://">link text</a> \n\n## <a name="test" id="anchor2"></a> point 2'
+        );
+        expect(namedAnchors).toStrictEqual([]);
+    });
+});

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

@@ -105,7 +105,7 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
                     </Button>,
                 ]}
                 {...simpleDialogProps}
-                data-test-id={(simpleDialogProps ?? {})["data-test-id"] ?? "sticky-note-modal"} // @deprecated we remove this automatically set testid with the next major release
+                data-test-id={(simpleDialogProps ?? {})["data-test-id"] ?? "sticky-note-modal"} // @deprecated (v25) we remove this automatically set testid
             >
                 <FieldItem
                     key="note"

package/src/cmem/react-flow/nodes/StickyNoteNode.tsx

@@ -1,8 +1,8 @@
 import React, { memo } from "react";
 
-import { NodeDefault, NodeProps } from "./../../../extensions/react-flow/nodes/NodeDefault";
+import { NodeDefault, NodeDefaultProps } from "./../../../extensions/react-flow/nodes/NodeDefault";
 
-export const StickyNoteNode = memo((node: NodeProps<any>) => {
+export const StickyNoteNode = memo((node: NodeDefaultProps<any>) => {
     const { data, ...otherNodeProps } = node;
 
     data.minimalShape = data.minimalShape ?? "none";

package/src/common/index.ts

@@ -14,6 +14,3 @@ export const utils = {
     setGlobalVar,
     getScrollParent,
 };
-
-// @deprecated use `utils`
-export const Utilities = utils;

package/src/components/Accordion/Accordion.tsx

@@ -19,26 +19,14 @@ export interface AccordionProps extends Omit<CarbonAccordionProps, "children" |
      * Defines how much space is used for the separation between an accordion item and the next one.
      */
     separationSize?: AccordionItemProps["separationSize"];
-    /**
-     * How much space is used for the header of the each of the accordion items.
-     * @deprecated Use ẁhitespaceSize` on `Accordion` or `AccordionItem` instead.
-     */
-    size?: "small" | "medium" | "large";
 }
 
-const carbonAccordionSizeMapping = {
-    small: "sm" as const,
-    medium: "md" as const,
-    large: "lg" as const,
-};
-
 export const Accordion = ({
     children,
     className = "",
     align = "start",
     whitespaceSize = "medium",
     separationSize = "none",
-    size = "medium",
     ...otherProps
 }: AccordionProps) => {
     const headerWhitespaceSize = typeof whitespaceSize === "string" ? whitespaceSize : whitespaceSize.header;
@@ -59,7 +47,6 @@ export const Accordion = ({
                 (className ? ` ${className}` : "")
             }
             align={align}
-            size={carbonAccordionSizeMapping[size]}
             {...otherProps}
         >
             {children}

package/src/components/Accordion/AccordionItem.tsx

@@ -32,11 +32,6 @@ export interface AccordionItemProps
      * Defines how much space is used for the separation between the accordion item and the next one.
      */
     separationSize?: sizeOptions;
-    /**
-     * minimize white space and paddings
-     * @deprecated Use `whitespaceSize="none"` on `Accordion` or `AccordionItem` instead.
-     */
-    condensed?: boolean;
     /**
      * do not use borders as visible separations on accordion item
      */
@@ -55,7 +50,6 @@ export const AccordionItem = ({
     elevated = false,
     whitespaceSize = "medium",
     separationSize = "none",
-    condensed = false,
     noBorder = false,
     ...otherProps
 }: AccordionItemProps) => {
@@ -75,7 +69,6 @@ export const AccordionItem = ({
                     ? ` ${eccgui}-accordion__item--contentspace-${contentWhitespaceSize}`
                     : "") +
                 (separationSize !== "none" ? ` ${eccgui}-accordion__item--separationspace-${separationSize}` : "") +
-                (condensed ? ` ${eccgui}-accordion__item--condensed` : "") +
                 (noBorder ? ` ${eccgui}-accordion__item--noborder` : "")
             }
             title={label}

package/src/components/Accordion/accordion.scss

@@ -22,12 +22,10 @@ $eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default;
     --#{$eccgui}-accordion-content-whitespace: #{$eccgui-size-accordion-content-basespace};
     --#{$eccgui}-accordion-separation: 0;
 }
-.#{$eccgui}-accordion__item--condensed,
 .#{$eccgui}-accordion__container--global-headerspace-none,
 .#{$eccgui}-accordion__item--headerspace-none {
     --#{$eccgui}-accordion-header-height: 0;
 }
-.#{$eccgui}-accordion__item--condensed,
 .#{$eccgui}-accordion__container--global-contentspace-none,
 .#{$eccgui}-accordion__item--contentspace-none {
     --#{$eccgui}-accordion-content-whitespace: #{$eccgui-size-block-whitespace * 0.25};
@@ -100,7 +98,6 @@ $eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default;
         }
     }
 
-    .#{$eccgui}-accordion__item--condensed &,
     .#{$eccgui}-accordion__container--global-contentspace-none &,
     .#{$eccgui}-accordion__item--contentspace-none & {
         .#{$prefix}--accordion__arrow {
@@ -155,14 +152,12 @@ $eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default;
         margin: 0;
     }
 
-    .#{$eccgui}-accordion__item--condensed &,
     .#{$eccgui}-accordion__container--global-contentspace-none &,
     .#{$eccgui}-accordion__item--contentspace-none & {
         padding-right: 0;
         padding-left: 0;
     }
 
-    .#{$eccgui}-accordion__item--condensed:not(.#{$eccgui}-accordion__item--fullwidth) &,
     .#{$prefix}--accordion--start.#{$eccgui}-accordion__container--global-contentspace-none
         :not(.#{$eccgui}-accordion__item--fullwidth)
         &,

package/src/components/AutoSuggestion/AutoSuggestion.scss

@@ -11,8 +11,7 @@
         max-width: 25rem;
         max-height: 30rem;
         margin-top: 0;
-        overflow-x: hidden;
-        overflow-y: auto;
+        overflow: hidden auto;
         background-color: $pt-popover-background-color;
 
         // TODO: was: 1px solid $list-container-item-border-color
@@ -30,36 +29,40 @@
 
 .#{$eccgui}-singlelinecodeeditor {
     position: relative;
+    padding: 0 1px;
 
-    .CodeMirror {
+    [class^="cm-theme"] {
+        width: 100%;
+    }
+
+    .cm-editor {
         top: 2px;
-        height: calc(#{$eccgui-size-textfield-height-regular} - 4px);
+        height: calc(#{$eccgui-size-textfield-height-regular} - 2px);
         padding: 0;
         margin: 0;
         overflow: hidden;
 
-        .CodeMirror-scroll {
+        &.cm-focused {
+            outline: none;
+        }
+
+        .cm-scroller {
             padding: 0;
             margin: 0;
-            overflow-x: auto !important;
-            overflow-y: hidden !important;
+            overflow: auto hidden !important;
         }
 
         .CodeMirror-vscrollbar {
             display: none !important;
         }
 
-        .CodeMirror-sizer {
+        .cm-content {
+            vertical-align: middle;
             border: none;
         }
 
-        .CodeMirror-lines {
-            padding: 0;
-            line-height: calc(#{$eccgui-size-textfield-height-regular} - 4px - 6px);
-        }
-
-        pre.CodeMirror-line,
-        pre.CodeMirror-placeholder,
+        pre.cm-line,
+        pre.cm-placeholder,
         pre.CodeMirror-line-like {
             box-sizing: content-box;
             height: calc(#{$eccgui-size-textfield-height-regular} - 4px - 6px);
@@ -70,13 +73,13 @@
             color: $input-color;
         }
 
-        pre.CodeMirror-placeholder {
+        pre.cm-placeholder {
             top: 3px;
             padding: 0;
             color: $input-placeholder-color;
         }
 
-        .CodeMirror-cursor {
+        .cm-cursor {
             width: 1px;
             margin: 0;
             background-color: transparent;