@eccenca/gui-elements 24.0.0-rc.2 → 24.0.0-rc.4

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.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,13 +2,13 @@ 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 { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { HtmlContentBlock, TestableComponent } from "../../index";
 
 export interface MarkdownProps extends TestableComponent {
@@ -42,8 +42,6 @@ export interface MarkdownProps extends TestableComponent {
      */
     linkTargetName?: false | string;
 }
-/* @deprecated use `MarkdownProps` */
-export type MarkdownParserProps = MarkdownProps;
 
 const configDefault = {
     /*
@@ -136,15 +134,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}>
@@ -165,6 +165,8 @@ export const Markdown = ({
     return inheritBlock ? (
         markdownDisplay
     ) : (
-        <HtmlContentBlock data-test-id={otherProps["data-test-id"]}>{markdownDisplay}</HtmlContentBlock>
+        <HtmlContentBlock className={`${eccgui}-markdown__container`} data-test-id={otherProps["data-test-id"]}>
+            {markdownDisplay}
+        </HtmlContentBlock>
     );
 };

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.utils.ts

@@ -1,18 +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[] = []
+    const regex = new RegExp('<a\\s+id="([^"]+)"\\s*>[^<]*</a>', "g");
+    const namedAnchors: string[] = [];
 
-    let results = regex.exec(markdown)
-    while(results !== null) {
+    let results = regex.exec(markdown);
+    while (results !== null) {
         namedAnchors.push(results[1]);
-        results = regex.exec(markdown)
+        results = regex.exec(markdown);
     }
-    return namedAnchors
-}
+    return namedAnchors;
+};
 
 const utils = {
-    extractNamedAnchors
-}
+    extractNamedAnchors,
+};
 
-export default utils
+export default utils;

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

@@ -1,13 +1,17 @@
-import utils from "./markdown.utils"
+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"])
+        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([])
+        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/Application/_config.scss

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

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
@@ -28,38 +27,55 @@
     }
 }
 
+.#{$eccgui}-autosuggestion__inputfield {
+    background-color: $eccgui-color-textfield-background;
+}
+
 .#{$eccgui}-singlelinecodeeditor {
-    position: relative;
+    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;
+    }
 
-    .CodeMirror {
-        top: 2px;
-        height: calc(#{$eccgui-size-textfield-height-regular} - 4px);
+    .cm-editor {
+        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;
 
-        .CodeMirror-scroll {
-            padding: 0;
-            margin: 0;
-            overflow-x: auto !important;
-            overflow-y: hidden !important;
-        }
-
-        .CodeMirror-vscrollbar {
-            display: none !important;
+        &.cm-focused {
+            outline: none;
+            box-shadow: none;
         }
 
-        .CodeMirror-sizer {
-            border: none;
+        .cm-scroller {
+            height: 100%;
+            padding: 0;
+            margin: 0;
+            overflow: auto hidden !important;
         }
 
-        .CodeMirror-lines {
+        .cm-content {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            height: 100%;
+            min-height: 100%;
             padding: 0;
-            line-height: calc(#{$eccgui-size-textfield-height-regular} - 4px - 6px);
+            border: none;
         }
 
-        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 +86,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;