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

package/src/components/MultiSuggestField/_multisuggestfield.scss

@@ -0,0 +1,8 @@
+@import "~@blueprintjs/select/src/components/multi-select/multi-select";
+
+.#{$ns}-multi-select-popover {
+    .#{$ns}-menu {
+        max-width: unset;
+        max-height: var(--eccgui-multisuggestfield-max-height, 45vh);
+    }
+}

package/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx

@@ -6,10 +6,10 @@ import "@testing-library/jest-dom";
 import { MultiSuggestField } from "../../../../index";
 import { CustomSearch, Default, dropdownOnFocus, predefinedNotControlledValues } from "../MultiSuggestField.stories";
 
-const testLabels = ["label1", "label2", "label3", "label4", "label5"];
+//const testLabels = ["label1", "label2", "label3", "label4", "label5"];
 
-const items = new Array(5).fill(undefined).map((_, id) => {
-    const testLabel = testLabels[id];
+const items = new Array(50).fill(undefined).map((_, id) => {
+    const testLabel = `label${id + 1}`;
     return { testLabel, testId: `${testLabel}-id` };
 });
 
@@ -108,7 +108,7 @@ describe("MultiSuggestField", () => {
                 expect(menuItems.length).toBe(dropdownOnFocus.args.items.length);
             });
 
-            fireEvent.change(input, { target: { value: "ex" } });
+            fireEvent.change(input, { target: { value: "cras" } });
 
             await waitFor(() => {
                 const listbox = screen.getByRole("listbox");
@@ -277,7 +277,7 @@ describe("MultiSuggestField", () => {
                 expect(menuItems.length).toBe(CustomSearch.args.items.length);
             });
 
-            fireEvent.change(input, { target: { value: "label1" } });
+            fireEvent.change(input, { target: { value: "label11" } });
 
             await waitFor(() => {
                 const listbox = screen.getByRole("listbox");
@@ -289,10 +289,10 @@ describe("MultiSuggestField", () => {
                 const item = menuItems[0];
 
                 const [div] = item.getElementsByTagName("div");
-                expect(div.textContent).toBe("label1");
+                expect(div.textContent).toBe("label11");
             });
 
-            fireEvent.change(input, { target: { value: "label1-id" } });
+            fireEvent.change(input, { target: { value: "label11-id" } });
 
             await waitFor(() => {
                 const listbox = screen.getByRole("listbox");
@@ -304,10 +304,10 @@ describe("MultiSuggestField", () => {
                 const item = menuItems[0];
 
                 const [div] = item.getElementsByTagName("div");
-                expect(div.textContent).toBe("label1");
+                expect(div.textContent).toBe("label11");
             });
 
-            fireEvent.change(input, { target: { value: "label1-id-other" } });
+            fireEvent.change(input, { target: { value: "label11-id-other" } });
 
             await waitFor(() => {
                 const listbox = screen.getByRole("listbox");
@@ -549,5 +549,99 @@ describe("MultiSuggestField", () => {
             const tagsAfterRemove = container.querySelectorAll("span[data-tag-index]");
             expect(tagsAfterRemove.length).toBe(0);
         });
+
+        it("should not contain the custom css property when limitHeightOpened not provided", async () => {
+            const { container } = render(
+                <MultiSuggestField {...Default.args} openOnKeyDown={false} data-testid="multi-suggest-field" />
+            );
+
+            const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect");
+
+            fireEvent.click(inputTargetContainer);
+
+            await waitFor(() => {
+                const dropdown = screen.getByTestId("multi-suggest-field_dropdown");
+                const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue(
+                    "--eccgui-multisuggestfield-max-height"
+                );
+
+                expect(customProperty).toBeFalsy();
+            });
+        });
+
+        it("should notcontain the custom css property when limitHeightOpened greater than 100", async () => {
+            const { container } = render(
+                <MultiSuggestField
+                    {...Default.args}
+                    openOnKeyDown={false}
+                    limitHeightOpened={110}
+                    data-testid="multi-suggest-field"
+                />
+            );
+
+            const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect");
+
+            fireEvent.click(inputTargetContainer);
+
+            await waitFor(() => {
+                const dropdown = screen.getByTestId("multi-suggest-field_dropdown");
+
+                const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue(
+                    "--eccgui-multisuggestfield-max-height"
+                );
+
+                expect(customProperty).toBeFalsy();
+            });
+        });
+
+        it("should contain the custom css property when limitHeightOpened is true", async () => {
+            const { container } = render(
+                <MultiSuggestField
+                    {...Default.args}
+                    openOnKeyDown={false}
+                    limitHeightOpened
+                    data-testid="multi-suggest-field"
+                />
+            );
+
+            const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect");
+
+            fireEvent.click(inputTargetContainer);
+
+            await waitFor(() => {
+                const dropdown = screen.getByTestId("multi-suggest-field_dropdown");
+
+                const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue(
+                    "--eccgui-multisuggestfield-max-height"
+                );
+
+                expect(customProperty).toBeDefined();
+            });
+        });
+
+        it("should contain the custom css property when limitHeightOpened a valid number value", async () => {
+            const { container } = render(
+                <MultiSuggestField
+                    {...Default.args}
+                    openOnKeyDown={false}
+                    limitHeightOpened={80}
+                    data-testid="multi-suggest-field"
+                />
+            );
+
+            const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect");
+
+            fireEvent.click(inputTargetContainer);
+
+            await waitFor(() => {
+                const dropdown = screen.getByTestId("multi-suggest-field_dropdown");
+
+                const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue(
+                    "--eccgui-multisuggestfield-max-height"
+                );
+
+                expect(customProperty).toBeDefined();
+            });
+        });
     });
 });

package/src/components/TextField/textfield.scss

@@ -4,8 +4,7 @@
 // own vars
 $eccgui-size-textfield-height-small: $eccgui-size-block-whitespace * 2 !default;
 $eccgui-size-textfield-height-regular: $eccgui-size-textfield-height-small * $eccgui-size-type-levelratio !default;
-$eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $eccgui-size-type-levelratio *
-    $eccgui-size-type-levelratio !default;
+$eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $eccgui-size-type-levelratio * $eccgui-size-type-levelratio !default;
 $eccgui-size-textfield-padding-horizontal-regular: $eccgui-size-inline-whitespace !default;
 $eccgui-size-textfield-padding-horizontal-small: $eccgui-size-inline-whitespace * 0.5 !default;
 $eccgui-typo-textfield-fontweight: $eccgui-font-weight-regular !default;

package/src/components/Typography/typography.scss

@@ -184,6 +184,16 @@ pre {
         padding: $eccgui-size-block-whitespace * 0.5;
         overflow-x: auto;
         background-color: $eccgui-color-workspace-background;
+
+        & > div[style]:has(.#{$eccgui}-markdown__syntaxhighlighter) {
+            // remove styles like padding and font from prism div
+            padding: 0 !important;
+            margin: 0 !important;
+            font-family: inherit !important;
+            font-size: inherit !important;
+            line-height: inherit !important;
+            background-color: transparent !important;
+        }
     }
 }
 

package/src/components/index.scss

@@ -38,6 +38,6 @@
 @import "./Typography/typography";
 @import "./Workspace/workspace";
 @import "./Accordion/accordion";
-@import "./AutoSuggestion/AutoSuggestion";
 @import "./Badge/badge";
 @import "./PropertyValuePair/propertyvalue";
+@import "./MultiSuggestField/multisuggestfield";

package/src/extensions/_index.scss

@@ -1,9 +1,4 @@
 @import "./react-flow/react-flow";
-
-/*
-CodeMirror styles are already included by the base component styles
-because it is used as lib for elements there already. 
 @import "./codemirror/codemirror";
-*/
-
+@import "./../components/AutoSuggestion/AutoSuggestion"; // the whole element should moved to extensions forlder
 @import "./uppy/fileupload";

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,13 +1,11 @@
-import React, { AllHTMLAttributes, useRef } from "react";
+import React, { useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { foldKeymap } from "@codemirror/language";
 import { EditorState, Extension } from "@codemirror/state";
 import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
-//CodeMirror
 import { minimalSetup } from "codemirror";
 
 import { markField } from "../../components/AutoSuggestion/extensions/markText";
-//constants
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 //hooks
@@ -27,6 +25,7 @@ import {
     adaptedLineNumbers,
     adaptedPlaceholder,
 } from "./tests/codemirrorTestHelper";
+
 export interface CodeEditorProps {
     // Is called with the editor instance that allows access via the CodeMirror API
     setEditorView?: (editor: EditorView | undefined) => any;
@@ -92,7 +91,7 @@ export interface CodeEditorProps {
     /** Long lines are wrapped and displayed on multiple lines */
     wrapLines?: boolean;
 
-    outerDivAttributes?: Partial<AllHTMLAttributes<HTMLDivElement>>;
+    outerDivAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "data-test-id">;
 
     /**
      * Size in spaces that is used for a tabulator key.
@@ -276,11 +275,15 @@ export const CodeEditor = ({
 
     return (
         <div
-            id={id ? id : `codemirror-${name}`}
+            {...outerDivAttributes}
+            // overwrite/extend some attributes
+            id={id ? id : name ? `codemirror-${name}` : undefined}
             ref={parent}
             data-test-id="codemirror-wrapper"
-            className={`${eccgui}-codeeditor ${eccgui}-codeeditor--mode-${mode}`}
-            {...outerDivAttributes}
+            className={
+                `${eccgui}-codeeditor ${eccgui}-codeeditor--mode-${mode}` +
+                (outerDivAttributes?.className ? ` ${outerDivAttributes?.className}` : "")
+            }
         />
     );
 };

package/src/extensions/codemirror/_codemirror.scss

@@ -29,7 +29,6 @@ $eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default
             // fix size to prevent wrong calculation of other elements
             padding: 0;
             margin: 1px;
-            cursor: text;
         }
 
         &.cm-focused {
@@ -54,6 +53,7 @@ $eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default
         }
 
         .cm-content {
+            cursor: text;
             border-right-width: $eccgui-size-inline-whitespace !important;
         }
 

package/src/index.scss

@@ -50,7 +50,6 @@ $prefix-carbon: $prefix;
 // == Load basic components styles =============================================
 
 @import "./components";
-@import "./extensions/codemirror/codemirror";
 
 // set more readable variable for prefix
 $prefix-eccgui: $eccgui;