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

package/src/components/Select/Select.tsx

@@ -142,14 +142,4 @@ export function Select<T>({
     );
 }
 
-/** @deprecated: instead of `const MySelect = Select.ofType<MyType>()` use directly `<Select<MyType> {...props} />` */
-function ofType<U>() {
-    console.warn(
-        "Usage of `ofType()` is deprecated! Instead of `const MySelect = Select.ofType<MyType>()` use directly `<Select<MyType> {...props} />`"
-    );
-    return (props: SelectProps<U>) => <Select<U> {...props} />;
-}
-
-Select.ofType = ofType;
-
 export default Select;

package/src/components/Spinner/Spinner.tsx

@@ -8,12 +8,9 @@ import {
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-// @deprecated use `SpinnerProps['position']`
-export type SpinnerPosition = "local" | "inline" | "global";
-// @deprecated use `SpinnerProps['size']`
-export type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit";
-// @deprecated use `SpinnerProps['stroke']`
-export type SpinnerStroke = "thin" | "medium" | "bold";
+type SpinnerPosition = "local" | "inline" | "global";
+type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit";
+type SpinnerStroke = "thin" | "medium" | "bold";
 type Intent = "inherit" | "primary" | "success" | "warning" | "danger";
 
 /** A spinner that is either displayed globally or locally. */

package/src/components/SuggestField/SuggestField.tsx

@@ -1,8 +1,13 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { AutoCompleteField, AutoCompleteFieldProps } from "../AutocompleteField/AutoCompleteField";
+import AutoCompleteField, { AutoCompleteFieldProps } from "../AutocompleteField/AutoCompleteField";
 
+/**
+ * Parameters for the auto-complete field parameterized by T and U.
+ * @param T is the input data structure/type of the items that can be selected.
+ * @param UPDATE_VALUE The value type that will be pushed into the onChange callback.
+ */
 export type SuggestFieldProps<T, UPDATE_VALUE> = AutoCompleteFieldProps<T, UPDATE_VALUE>;
 
 /**

package/src/components/Table/Table.tsx

@@ -4,8 +4,8 @@ import { DataTableSize as CarbonDataTableSize, Table as CarbonTable } from "@car
 // import { TableProps as CarbonTableProps } from "@carbon/react/es/components/DataTable/Table"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-type TableRowHeightSizeDepracted = "compact" | "tall"; // @deprecated
-export type TableRowHeightSize = "small" | "medium" | "large" | TableRowHeightSizeDepracted;
+// @deprecated (v25) use `TableProps["size"]`
+export type TableRowHeightSize = "small" | "medium" | "large";
 
 // workaround to get type/interface
 type CarbonTableProps = React.ComponentProps<typeof CarbonTable>;
@@ -14,8 +14,6 @@ export interface TableProps
         React.TableHTMLAttributes<HTMLTableElement> {
     /**
      * Sets basically the height of a row inside the table.
-     * Please use only `small`, `medium` and `large`.
-     * `compact` and `tall` are deprecated.
      */
     size?: TableRowHeightSize;
     /**
@@ -42,9 +40,6 @@ export const tableRowHeightSizes: Record<string, CarbonDataTableSize> = {
     small: "xs",
     medium: "sm",
     large: "md",
-    // deprecated values
-    compact: "xs",
-    tall: "md",
 };
 
 export function Table({

package/src/components/Tag/Tag.tsx

@@ -47,14 +47,6 @@ export interface TagProps
      * Icon displayed left from the tag label.
      */
     icon?: ValidIconName | React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
-
-    // deprecated
-
-    /**
-     * @deprecated
-     * **deprecated**, use `minimal=false` plus `emphasis="stronger"`
-     */
-    emphasized?: never;
 }
 
 function Tag({
@@ -76,6 +68,7 @@ function Tag({
         try {
             color = Color(backgroundColor);
         } catch (ex) {
+            // eslint-disable-next-line no-console
             console.warn("Received invalid background color for tag: " + backgroundColor);
         }
 

package/src/components/TextField/TextArea.tsx

@@ -15,26 +15,6 @@ import { ValidIconName } from "../Icon/canonicalIconNames";
 import { InvisibleCharacterWarningProps, useTextValidation } from "./useTextValidation";
 
 export interface TextAreaProps extends Omit<BlueprintTextAreaProps, "intent"> {
-    /**
-     * when set to true the input takes a blue border color
-     * @deprecated Use the `intent` property.
-     */
-    hasStatePrimary?: boolean;
-    /**
-     * when set to true the input takes a green border color
-     * @deprecated Use the `intent` property.
-     */
-    hasStateSuccess?: boolean;
-    /**
-     * when set to true the input takes an orange border color
-     * @deprecated Use the `intent` property.
-     */
-    hasStateWarning?: boolean;
-    /**
-     * when set to true the input takes a red border color
-     * @deprecated Use the `intent` property.
-     */
-    hasStateDanger?: boolean;
     /**
      * Intent state of the text area.
      */
@@ -62,16 +42,13 @@ export interface TextAreaProps extends Omit<BlueprintTextAreaProps, "intent"> {
 
 export const TextArea = ({
     className = "",
-    hasStatePrimary = false,
-    hasStateSuccess = false,
-    hasStateWarning = false,
-    hasStateDanger = false,
     rows = 5,
     invisibleCharacterWarning,
     leftIcon,
     rightElement,
     wrapperDivProps,
-    ...otherProps
+    intent,
+    ...otherBlueprintTextAreaProps
 }: TextAreaProps) => {
     const textAreaCallback = React.useCallback(
         (textAreaElement: HTMLTextAreaElement) => {
@@ -148,26 +125,6 @@ export const TextArea = ({
         [leftIcon, rightElement]
     );
 
-    let deprecatedIntent;
-    switch (true) {
-        case hasStatePrimary:
-            deprecatedIntent = IntentDefinitions.PRIMARY;
-            break;
-        case hasStateSuccess:
-            deprecatedIntent = IntentDefinitions.SUCCESS;
-            break;
-        case hasStateWarning:
-            deprecatedIntent = IntentDefinitions.WARNING;
-            break;
-        case hasStateDanger:
-            deprecatedIntent = IntentDefinitions.DANGER;
-            break;
-        default:
-            break;
-    }
-
-    const { intent = deprecatedIntent, ...otherBlueprintTextAreaProps } = otherProps;
-
     let iconIntent;
     switch (intent) {
         case "edited":

package/src/components/TextField/TextField.tsx

@@ -3,7 +3,7 @@ import {
     Classes as BlueprintClassNames,
     HTMLInputProps,
     InputGroup as BlueprintInputGroup,
-    InputGroupProps2,
+    InputGroupProps as BlueprintInputGroupProps,
     Intent as BlueprintIntent,
     MaybeElement,
 } from "@blueprintjs/core";
@@ -16,27 +16,7 @@ import Icon from "../Icon/Icon";
 import { InvisibleCharacterWarningProps, useTextValidation } from "./useTextValidation";
 
 export interface TextFieldProps
-    extends Partial<Omit<InputGroupProps2, "intent" | "leftIcon" | "leftElement"> & HTMLInputProps> {
-    /**
-     * The input element is displayed with primary color scheme.
-     * @deprecated
-     */
-    hasStatePrimary?: boolean;
-    /**
-     * The input element is displayed with success (some type of green) color scheme.
-     * @deprecated
-     */
-    hasStateSuccess?: boolean;
-    /**
-     * The input element is displayed with warning (some type of orange) color scheme.
-     * @deprecated
-     */
-    hasStateWarning?: boolean;
-    /**
-     * The input element is displayed with danger (some type of red) color scheme.
-     * @deprecated
-     */
-    hasStateDanger?: boolean;
+    extends Partial<Omit<BlueprintInputGroupProps, "intent" | "leftIcon" | "leftElement"> & HTMLInputProps> {
     /**
      * Intent state of the text field.
      */
@@ -63,39 +43,19 @@ export interface TextFieldProps
  */
 export const TextField = ({
     className = "",
-    hasStatePrimary = false,
-    hasStateSuccess = false,
-    hasStateWarning = false,
-    hasStateDanger = false,
     fullWidth = true,
     leftIcon,
     invisibleCharacterWarning,
     escapeToBlur = false,
-    ...otherProps
+    intent,
+    ...otherBlueprintInputGroupProps
 }: TextFieldProps) => {
     const inputRef = React.useRef<HTMLInputElement | null>(null);
-    let deprecatedIntent;
-    switch (true) {
-        case hasStatePrimary:
-            deprecatedIntent = IntentDefinitions.PRIMARY;
-            break;
-        case hasStateSuccess:
-            deprecatedIntent = IntentDefinitions.SUCCESS;
-            break;
-        case hasStateWarning:
-            deprecatedIntent = IntentDefinitions.WARNING;
-            break;
-        case hasStateDanger:
-            deprecatedIntent = IntentDefinitions.DANGER;
-            break;
-        default:
-            break;
-    }
 
     const handleLabelEscape = React.useCallback(() => {
         inputRef.current?.blur();
-        if (otherProps.inputRef) {
-            const otherInputRef = otherProps.inputRef as RefObject<HTMLInputElement>;
+        if (otherBlueprintInputGroupProps.inputRef) {
+            const otherInputRef = otherBlueprintInputGroupProps.inputRef as RefObject<HTMLInputElement>;
             if (otherInputRef.current) {
                 otherInputRef.current.blur();
             }
@@ -109,13 +69,11 @@ export const TextField = ({
                 handleLabelEscape();
                 return false;
             }
-            return otherProps.onKeyDown?.(event);
+            return otherBlueprintInputGroupProps.onKeyDown?.(event);
         },
-        [otherProps.onKeyDown, escapeToBlur]
+        [otherBlueprintInputGroupProps.onKeyDown, escapeToBlur]
     );
 
-    const { intent = deprecatedIntent, ...otherBlueprintInputGroupProps } = otherProps;
-
     let iconIntent;
     switch (intent) {
         case "edited":
@@ -169,7 +127,7 @@ export const TextField = ({
             }
             dir={"auto"}
             onChange={maybeWrappedOnChange}
-            onKeyDown={otherProps.onKeyDown || escapeToBlur ? onKeyDown : undefined}
+            onKeyDown={otherBlueprintInputGroupProps.onKeyDown || escapeToBlur ? onKeyDown : undefined}
         />
     );
 };

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/Tooltip/Tooltip.tsx

@@ -7,7 +7,7 @@ import {
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-import { Markdown, MarkdownParserProps } from "./../../cmem/markdown/Markdown";
+import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
 
 export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     /**
@@ -32,7 +32,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     /**
      * Set properties for the Markdown parser
      */
-    markdownProps?: Omit<MarkdownParserProps, "children">;
+    markdownProps?: Omit<MarkdownProps, "children">;
 }
 
 export const Tooltip = ({

package/src/components/Typography/Highlighter.tsx

@@ -51,26 +51,23 @@ const escapeRegexWord = (str: string) => {
 
 /**
  * Extracts search words separated by white space.
- * @deprecated moved to `highlighterUtils.extractSearchWords`
  */
-export function extractSearchWords(textQuery: string, toLowerCase = false): string[] {
+function extractSearchWords(textQuery: string, toLowerCase = false): string[] {
     const words = textQuery.split(RegExp("\\s+")).filter((word) => word !== "");
     return toLowerCase ? words.map((w) => w.toLowerCase()) : words;
 }
 
 /**
  * Returns true if all search words are included in the given text
- * @deprecated moved to `highlighterUtils.matchesAllWords`
  */
-export function matchesAllWords(text: string, searchWords: string[]): boolean {
+function matchesAllWords(text: string, searchWords: string[]): boolean {
     return searchWords.every((w) => text.includes(w));
 }
 
 /**
  * Creates a case-insensitive multi-word regex, that matches any of the given words.
- * @deprecated moved to `highlighterUtils.createMultiWordRegex`
  */
-export function createMultiWordRegex(multiWordQuery: string[], global = true) {
+function createMultiWordRegex(multiWordQuery: string[], global = true) {
     const regexString = multiWordQuery.map(escapeRegexWord).join("|");
     return RegExp(regexString, (global ? "g" : "") + "i");
 }

package/src/components/Typography/index.ts

@@ -1,12 +1,3 @@
-import { createMultiWordRegex, extractSearchWords, matchesAllWords } from "./Highlighter";
-
-// @deprecated use `highlighterUtils`
-export const HighlighterFunctions = {
-    extractSearchWords,
-    matchesAllWords,
-    createMultiWordRegex,
-};
-
 export * from "./Highlighter";
 export * from "./HtmlContentBlock";
 export * from "./OverflowText";

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/Workspace/WorkspaceContent.tsx

@@ -10,7 +10,7 @@ export type WorkspaceContentProps = GridProps;
 
 export const WorkspaceContent = ({ children, className = "", ...restProps }: WorkspaceContentProps) => {
     return (
-        <Grid {...restProps} as={"article"} className={`${eccgui}-workspace__content ` + className} fullWidth={true}>
+        <Grid {...restProps} as={"article"} className={`${eccgui}-workspace__content ` + className}>
             <GridRow dontWrapColumns={false}>{children}</GridRow>
         </Grid>
     );

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/components/index.ts

@@ -26,7 +26,6 @@ export * from "./Menu";
 export * from "./MultiSelect/MultiSelect";
 export * from "./MultiSuggestField/MultiSuggestField";
 export * from "./Notification";
-export * from "./NumericInput/NumericInput";
 export * from "./OverviewItem";
 export * from "./Pagination/Pagination";
 export * from "./ProgressBar";

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";