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

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.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/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;