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

package/dist/types/components/TextField/TextField.d.ts

@@ -1,29 +1,9 @@
 import React from "react";
-import { HTMLInputProps, InputGroupProps2, MaybeElement } from "@blueprintjs/core";
+import { HTMLInputProps, InputGroupProps as BlueprintInputGroupProps, MaybeElement } from "@blueprintjs/core";
 import { IntentTypes } from "../../common/Intent";
 import { ValidIconName } from "../Icon/canonicalIconNames";
 import { InvisibleCharacterWarningProps } 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;
+export interface TextFieldProps extends Partial<Omit<BlueprintInputGroupProps, "intent" | "leftIcon" | "leftElement"> & HTMLInputProps> {
     /**
      * Intent state of the text field.
      */
@@ -46,5 +26,5 @@ export interface TextFieldProps extends Partial<Omit<InputGroupProps2, "intent"
 /**
  * Text input field.
  */
-export declare const TextField: ({ className, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, fullWidth, leftIcon, invisibleCharacterWarning, escapeToBlur, ...otherProps }: TextFieldProps) => React.JSX.Element;
+export declare const TextField: ({ className, fullWidth, leftIcon, invisibleCharacterWarning, escapeToBlur, intent, ...otherBlueprintInputGroupProps }: TextFieldProps) => React.JSX.Element;
 export default TextField;

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TooltipProps as BlueprintTooltipProps } from "@blueprintjs/core";
-import { MarkdownParserProps } from "./../../cmem/markdown/Markdown";
+import { MarkdownProps } from "./../../cmem/markdown/Markdown";
 export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     /**
      * Add dotted underline as visual indication to the target that a tooltip is attached.
@@ -24,7 +24,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     /**
      * Set properties for the Markdown parser
      */
-    markdownProps?: Omit<MarkdownParserProps, "children">;
+    markdownProps?: Omit<MarkdownProps, "children">;
 }
 export declare const Tooltip: ({ children, content, className, size, addIndicator, markdownEnabler, markdownProps, ...otherProps }: TooltipProps) => React.JSX.Element;
 export default Tooltip;

package/dist/types/components/Typography/Highlighter.d.ts

@@ -11,19 +11,16 @@ export interface HighlighterProps {
 export declare function Highlighter({ label, searchValue }: HighlighterProps): React.JSX.Element;
 /**
  * Extracts search words separated by white space.
- * @deprecated moved to `highlighterUtils.extractSearchWords`
  */
-export declare function extractSearchWords(textQuery: string, toLowerCase?: boolean): string[];
+declare function extractSearchWords(textQuery: string, toLowerCase?: boolean): string[];
 /**
  * Returns true if all search words are included in the given text
- * @deprecated moved to `highlighterUtils.matchesAllWords`
  */
-export declare function matchesAllWords(text: string, searchWords: string[]): boolean;
+declare function matchesAllWords(text: string, searchWords: string[]): boolean;
 /**
  * Creates a case-insensitive multi-word regex, that matches any of the given words.
- * @deprecated moved to `highlighterUtils.createMultiWordRegex`
  */
-export declare function createMultiWordRegex(multiWordQuery: string[], global?: boolean): RegExp;
+declare function createMultiWordRegex(multiWordQuery: string[], global?: boolean): RegExp;
 export declare const highlighterUtils: {
     extractSearchWords: typeof extractSearchWords;
     matchesAllWords: typeof matchesAllWords;

package/dist/types/components/Typography/index.d.ts

@@ -1,9 +1,3 @@
-import { createMultiWordRegex, extractSearchWords, matchesAllWords } from "./Highlighter";
-export declare const HighlighterFunctions: {
-    extractSearchWords: typeof extractSearchWords;
-    matchesAllWords: typeof matchesAllWords;
-    createMultiWordRegex: typeof createMultiWordRegex;
-};
 export * from "./Highlighter";
 export * from "./HtmlContentBlock";
 export * from "./OverflowText";

package/dist/types/components/index.d.ts

@@ -12,6 +12,7 @@ export * from "./Checkbox/Checkbox";
 export * from "./ContextOverlay";
 export * from "./Depiction/Depiction";
 export * from "./Dialog";
+export * from "./FlexibleLayout";
 export * from "./Form";
 export * from "./Grid";
 export * from "./HoverToggler/HoverToggler";
@@ -25,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/dist/types/extensions/codemirror/CodeMirror.d.ts

@@ -1,30 +1,17 @@
-import React, { TextareaHTMLAttributes } from "react";
-import CodeMirror from "codemirror";
-import "codemirror/mode/markdown/markdown.js";
-import "codemirror/mode/python/python.js";
-import "codemirror/mode/sparql/sparql.js";
-import "codemirror/mode/sql/sql.js";
-import "codemirror/mode/turtle/turtle.js";
-import "codemirror/mode/xml/xml.js";
-import "codemirror/mode/jinja2/jinja2.js";
-import "codemirror/mode/yaml/yaml.js";
-import "codemirror/mode/javascript/javascript.js";
-import "codemirror/mode/ntriples/ntriples.js";
-import "codemirror/mode/mathematica/mathematica.js";
-import "codemirror-formatting";
-import "codemirror/addon/fold/foldcode";
-import "codemirror/addon/fold/foldgutter";
-import "codemirror/addon/fold/brace-fold";
-import "codemirror/addon/fold/xml-fold.js";
-export declare const supportedCodeEditorModes: readonly ["markdown", "python", "sparql", "sql", "turtle", "xml", "jinja2", "yaml", "json", "ntriples", "mathematica", "undefined"];
-type SupportedModesTuple = typeof supportedCodeEditorModes;
-export type SupportedCodeEditorModes = SupportedModesTuple[number];
+import React, { AllHTMLAttributes } from "react";
+import { Extension } from "@codemirror/state";
+import { EditorView, Rect } from "@codemirror/view";
+import { SupportedCodeEditorModes } from "./hooks/useCodemirrorModeExtension.hooks";
 export interface CodeEditorProps {
-    setEditorInstance?: (editor: CodeMirror.Editor) => any;
+    setEditorView?: (editor: EditorView | undefined) => any;
     /**
      * `name` attribute of connected textarea element.
      */
     name: string;
+    /**
+     * Placeholder to be shown when no text has been entered, yet.
+     */
+    placeholder?: string;
     /**
      * `id` attribute of connected textarea element.
      * If not set then the default value is created by `codemirror-${name-attribute}`.
@@ -35,6 +22,29 @@ export interface CodeEditorProps {
      * As input the new value is given.
      */
     onChange?: (v: any) => void;
+    /**
+     *  Called when the focus status changes
+     */
+    onFocusChange?: (focused: boolean) => any;
+    /**
+     * Called when the user presses a key
+     */
+    onKeyDown?: (event: KeyboardEvent) => boolean;
+    /**
+     * function invoked when any click occurs
+     */
+    onMouseDown?: (view: EditorView) => void;
+    /**
+     * Called when the user selects text
+     */
+    onSelection?: (ranges: {
+        from: number;
+        to: number;
+    }[]) => any;
+    /**
+     * Called when the cursor position changes
+     */
+    onCursorChange?: (pos: number, coords: Rect, scrollinfo: HTMLElement, cm: EditorView) => any;
     /**
      * Syntax mode of the code editor.
      */
@@ -53,7 +63,7 @@ export interface CodeEditorProps {
     height?: number | string;
     /** Long lines are wrapped and displayed on multiple lines */
     wrapLines?: boolean;
-    outerDivAttributes?: Partial<TextareaHTMLAttributes<HTMLDivElement>>;
+    outerDivAttributes?: Partial<AllHTMLAttributes<HTMLDivElement>>;
     /**
      * Size in spaces that is used for a tabulator key.
      */
@@ -70,14 +80,32 @@ export interface CodeEditorProps {
     /**
      *  handler for scroll event
      */
-    onScroll?: (editorInstance: CodeMirror.Editor) => void;
+    onScroll?: (event: Event, view: EditorView) => boolean | void;
     /**
      * optional property to fold code for the supported modes e.g: xml, json etc.
      */
     supportCodeFolding?: boolean;
+    /**
+     * highlight active line where the cursor is currently in
+     */
+    shouldHighlightActiveLine?: boolean;
+    /**
+     * additional extensions to customize the editor further
+     */
+    additionalExtensions?: Extension[];
+    /**
+     * codemirror minimal setup flag
+     */
+    shouldHaveMinimalSetup?: boolean;
+    /**
+     * If the <Tab> key is enabled as normal input, i.e. it won't have the behavior of changing to the next input element, expected in a web app.
+     */
+    enableTab?: boolean;
 }
 /**
  * Includes a code editor, currently we use CodeMirror library as base.
  */
-export declare const CodeEditor: ({ onChange, name, id, mode, preventLineNumbers, defaultValue, readOnly, height, wrapLines, onScroll, setEditorInstance, supportCodeFolding, outerDivAttributes, tabIntentSize, tabIntentStyle, tabForceSpaceForModes, }: CodeEditorProps) => React.JSX.Element;
-export {};
+export declare const CodeEditor: {
+    ({ onChange, onSelection, onMouseDown, onFocusChange, onKeyDown, onCursorChange, name, id, mode, preventLineNumbers, defaultValue, readOnly, shouldHaveMinimalSetup, wrapLines, onScroll, setEditorView, supportCodeFolding, shouldHighlightActiveLine, outerDivAttributes, tabIntentSize, tabIntentStyle, placeholder, additionalExtensions, tabForceSpaceForModes, enableTab, height, }: CodeEditorProps): React.JSX.Element;
+    supportedModes: ("markdown" | "python" | "sparql" | "turtle" | "xml" | "yaml" | "jinja2" | "json" | "ntriples" | "mathematica" | "sql" | "javascript")[];
+};

package/dist/types/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.d.ts

@@ -0,0 +1,23 @@
+import { StreamParser } from "@codemirror/language";
+import { markdown } from "@codemirror/lang-markdown";
+import { json } from "@codemirror/lang-json";
+import { xml } from "@codemirror/lang-xml";
+import { sql } from "@codemirror/legacy-modes/mode/sql";
+declare const supportedModes: {
+    readonly markdown: typeof markdown;
+    readonly python: StreamParser<unknown>;
+    readonly sparql: StreamParser<unknown>;
+    readonly turtle: StreamParser<unknown>;
+    readonly xml: typeof xml;
+    readonly yaml: StreamParser<unknown>;
+    readonly jinja2: StreamParser<unknown>;
+    readonly json: typeof json;
+    readonly ntriples: StreamParser<unknown>;
+    readonly mathematica: StreamParser<unknown>;
+    readonly sql: typeof sql;
+    readonly javascript: StreamParser<unknown>;
+};
+export declare const supportedCodeEditorModes: Array<keyof typeof supportedModes>;
+export type SupportedCodeEditorModes = (typeof supportedCodeEditorModes)[number];
+export declare const useCodeMirrorModeExtension: (mode?: SupportedCodeEditorModes) => any;
+export {};

package/dist/types/extensions/codemirror/tests/codemirrorTestHelper.d.ts

@@ -0,0 +1,20 @@
+/**
+ *  This file helps avoid jest errors that arise from codemirror node_module files.
+ *  Errors like 'Cannot read keyword of undefined',
+ *              '(view, highlightActiveLine) is not a function',
+ *              'EditorView is not a constructor'
+ * This errors do not exist during compilation only during testing.
+ */
+import { Extension } from "@codemirror/state";
+/** placeholder extension, current error '_view.placeholder is not a function' */
+export declare const adaptedPlaceholder: (text?: string) => Extension;
+/** current error '_view.Editor is not a constructor' */
+export declare const AdaptedEditorView: any;
+/** extension adding event handlers, current error '(view, domEventHandlers) is not a function'  */
+export declare const AdaptedEditorViewDomEventHandlers: any;
+export declare const adaptedSyntaxHighlighting: (style: any) => any;
+export declare const adaptedHighlightSpecialChars: (props?: any) => any;
+export declare const adaptedLineNumbers: (props?: any) => any;
+export declare const adaptedHighlightActiveLine: () => any;
+export declare const adaptedFoldGutter: (props?: any) => any;
+export declare const adaptedCodeFolding: (props?: any) => any;

package/dist/types/extensions/react-flow/edges/edgeTypes.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated (v25) will be removed without replacement, define it yourself or use `<ReactFlow/` with `configuration` option. */
 export declare const edgeTypes: {
     default: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
     straight: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;

package/dist/types/extensions/react-flow/index.d.ts

@@ -15,17 +15,3 @@ export * from "./minimap/MiniMap";
 export * from "./minimap/utils";
 export { nodeTypes } from "./nodes/nodeTypes";
 export { edgeTypes } from "./edges/edgeTypes";
-declare const minimapNodeClassName: (node: any) => string;
-declare const minimapNodeColor: (node: any) => any;
-export { minimapNodeClassName, minimapNodeColor };
-declare const nodeUtils: {
-    generateStyleWithColor: (color: string) => import("react").CSSProperties;
-    transformNodeToStickyNode: (node: import("react-flow-renderer").Node<any>) => {
-        id: string;
-        content: string;
-        color: string;
-        position: number[];
-        dimension: number[];
-    };
-};
-export { nodeUtils };

package/dist/types/extensions/react-flow/nodes/NodeContent.d.ts

@@ -6,14 +6,12 @@ import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 import { ReacFlowVersionSupportProps } from "../versionsupport";
 import { HandleNextProps, HandleProps } from "./../handles/HandleDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
-import { NodeProps } from "./NodeDefault";
-import { HighlightingState, NodeHighlightColor } from "./sharedTypes";
+import { NodeDefaultProps } from "./NodeDefault";
+import { NodeHighlightColor } from "./sharedTypes";
 type NodeContentHandleLegacyProps = HandleProps;
 type NodeContentHandleNextProps = HandleNextProps;
 export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps;
-export type { HighlightingState };
-export type IHandleProps = NodeContentHandleLegacyProps;
-export type NodeDimensions = {
+type NodeDimensions = {
     width: number;
     height: number;
 };
@@ -90,12 +88,6 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * Also the depiction is displayed larger.
      */
     enlargeHeader?: boolean;
-    /**
-     * @deprecated
-     * Set the type of used highlights to mark the node.
-     * Replaced by `intent` and `highlightColor` properties.
-     */
-    highlightedState?: HighlightingState | HighlightingState[];
     /**
      * Defines how the borders of a node are displayed.
      * Use this property to overwrite default styles.
@@ -145,7 +137,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * Callback function to provide content for the tooltip on a node with a defined `minimalShape`.
      * If you do not want a tooltip in this state you need to provide a callback that returns an empty value.
      */
-    getMinimalTooltipData?: (node: NodeProps<NODE_DATA>) => NodeContentData;
+    getMinimalTooltipData?: (node: NodeDefaultProps<NODE_DATA>) => NodeContentData;
     /**
      * Set if a handle is displayed even if it does not allow a connection to an edge.
      */
@@ -198,11 +190,11 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
  * The `NodeContent` element manages the main view of how a node is displaying which content.
  * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
  */
-export declare function NodeContent<CONTENT_PROPS = any>({ flowVersion, iconName, depiction, leftElement, typeLabel, label, labelSubline, enlargeHeader, fullWidth, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, highlightedState, intent, border, highlightColor, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, introductionTime, onNodeResize, nodeDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherDomProps }: NodeContentProps<any>): React.JSX.Element;
+export declare function NodeContent<CONTENT_PROPS = any>({ flowVersion, iconName, depiction, leftElement, typeLabel, label, labelSubline, enlargeHeader, fullWidth, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, intent, border, highlightColor, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, introductionTime, onNodeResize, nodeDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherDomProps }: NodeContentProps<any>): React.JSX.Element;
 export declare const nodeContentUtils: {
     evaluateHighlightColors: (baseCustomProperty: string, highlightColor?: NodeHighlightColor | NodeHighlightColor[]) => {
         highlightClassNameSuffix: string[];
         highlightCustomPropertySettings: React.CSSProperties;
     };
-    gethighlightedStateClasses: (state: HighlightingState | HighlightingState[], baseClassName: string) => string;
 };
+export {};

package/dist/types/extensions/react-flow/nodes/NodeDefault.d.ts

@@ -9,7 +9,6 @@ export interface NodeDefaultProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends R
      */
     data: NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS>;
 }
-export type NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> = NodeDefaultProps<NODE_DATA, NODE_CONTENT_PROPS>;
 /**
  * The `NodeDefault` element manages the display of React-Flow nodes.
  * This element cannot be used directly, it must be connected via a `nodeTypes` definition and all properties need to be routed through the `elements` property items inside the `ReactFlow` container.

package/dist/types/extensions/react-flow/nodes/nodeTypes.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated (v25) will be removed without replacement, define it yourself or use `<ReactFlow/` with `configuration` option. */
 export declare const nodeTypes: {
     default: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeDefaultProps<any>) => import("react").JSX.Element>;
     graphNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeDefaultProps<any>) => import("react").JSX.Element>;

package/dist/types/extensions/react-flow/nodes/sharedTypes.d.ts

@@ -1,3 +1,2 @@
 import Color from "color";
-export type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
 export type NodeHighlightColor = "default" | "alternate" | Color | string;

package/dist/types/index.d.ts

@@ -10,17 +10,9 @@ declare const ClassNames: {
     Skeleton: typeof Skeleton;
     Typography: typeof TypographyClassNames;
 };
-declare const HelperClasses: {
-    Blueprint: typeof BlueprintClasses;
-    Intent: {
-        [key: string]: string;
-    };
-    Skeleton: typeof Skeleton;
-    Typography: typeof TypographyClassNames;
-};
 export * from "./configuration/constants";
 export * from "./common";
 export * from "./components";
 export * from "./extensions";
 export * from "./cmem";
-export { ClassNames, HelperClasses, LegacyReplacements };
+export { ClassNames, LegacyReplacements };

package/dist/types/legacy-replacements/Button/AffirmativeButton.d.ts

@@ -1,2 +1,3 @@
 import React from "react";
+/** @deprecated (v25) all legacy component support will be removed, switch to `<Button affirmative />` */
 export declare function AffirmativeButtonReplacement({ children, ...otherProps }: any): React.JSX.Element;

package/dist/types/legacy-replacements/Button/Button.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const iconMappings: {
     [key: string]: any;
 };
+/** @deprecated (v25) all legacy component support will be removed, switch to `<Button />` */
 export declare function ButtonReplacement({ children, className, fabSize, iconName, tooltip, progress, disabled, affirmative, dismissive, disruptive, raised, colored, ...otherProps }: any): React.JSX.Element;

package/dist/types/legacy-replacements/Button/DismissiveButton.d.ts

@@ -1,2 +1,3 @@
 import React from "react";
+/** @deprecated (v25) all legacy component support will be removed, switch to `<Button dismissive />` */
 export declare function DismissiveButtonReplacement({ children, ...otherProps }: any): React.JSX.Element;

package/dist/types/legacy-replacements/Button/DisruptiveButton.d.ts

@@ -1,2 +1,3 @@
 import React from "react";
+/** @deprecated (v25) all legacy component support will be removed, switch to `<Button disruptive />` */
 export declare function DisruptiveButtonReplacement({ children, ...otherProps }: any): React.JSX.Element;

package/dist/types/legacy-replacements/Checkbox/Checkbox.d.ts

@@ -1,2 +1,3 @@
 import React from "react";
+/** @deprecated (v25) all legacy component support will be removed, switch to `<Checkbox />` */
 export declare function CheckboxReplacement({ children, checked, className, disabled, label, onChange, ...otherProps }: any): React.JSX.Element;

package/dist/types/legacy-replacements/Radio/RadioButton.d.ts

@@ -1,2 +1,3 @@
 import React from "react";
+/** @deprecated (v25) all legacy component support will be removed, switch to `<RadioButton />` */
 export declare function RadioButtonReplacement({ children, label, ...otherProps }: any): React.JSX.Element;

package/dist/types/legacy-replacements/Tabs/Tabs.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TabsProps as BlueprintTabsProps } from "@blueprintjs/core";
-interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "large" | "id" | "animate"> {
+interface LegacyTabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "large" | "id" | "animate"> {
     activeTab: string;
     tabs: DeprecatedTabProps[];
     onTabClick?: ({ props }: any) => void;
@@ -11,6 +11,7 @@ interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "
      */
     controlled?: boolean;
 }
+/** @deprecated (v25) all legacy component support will be removed */
 export interface DeprecatedTabProps {
     tabId: string;
     tabTitle: React.ReactNode;
@@ -18,5 +19,6 @@ export interface DeprecatedTabProps {
     dontShrink?: boolean;
     className?: string;
 }
-export declare function TabsReplacement({ activeTab, tabs, onTabClick, controlled, prefixTabNames, className, allowScrollbars, ...restProps }: TabsProps): React.JSX.Element;
+/** @deprecated (v25) all legacy component support will be removed, switch to `<Tabs />` */
+export declare function TabsReplacement({ activeTab, tabs, onTabClick, controlled, prefixTabNames, className, allowScrollbars, ...restProps }: LegacyTabsProps): React.JSX.Element;
 export {};

package/dist/types/legacy-replacements/TextField/TextField.d.ts

@@ -1,2 +1,3 @@
 import React from "react";
+/** @deprecated (v25) all legacy component support will be removed, switch to `<TextField />`, `<TextArea />`, `<FieldItem />` */
 export declare function TextFieldReplacement({ className, disabled, error, inputClassName, label, multiline, onChange, onClearValue, required, stretch, value, ...otherProps }: any): React.JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.0.0-rc.1",
+    "version": "24.0.0-rc.3",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -71,14 +71,17 @@
         "@carbon/icons": "^11.47.1",
         "@carbon/react": "^1.64.1",
         "@mavrin/remark-typograf": "^2.2.0",
-        "codemirror": "^5.65.16",
-        "codemirror-formatting": "^1.0.0",
+        "codemirror": "^6.0.1",
+        "@codemirror/legacy-modes": "^6.4.1",
+        "@codemirror/lang-markdown": "^6.2.5",
+        "@codemirror/lang-json": "^6.0.1",
+        "@codemirror/lang-xml": "^6.1.0",
+        "xml-formatter": "^3.6.3",
         "color": "^4.2.3",
         "compute-scroll-into-view": "^3.1.0",
         "lodash": "^4.17.21",
         "re-resizable": "6.9.9",
         "react": "^16.13.1",
-        "react-codemirror2": "^7.3.0",
         "react-dom": "^16.13.1",
         "react-flow-renderer": "9.7.4",
         "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",

package/src/cmem/ActivityControl/ActivityControlTypes.ts

@@ -1,5 +1,4 @@
-// @deprecated use `SilkActivityStatusProps`
-export interface IActivityStatus {
+export interface SilkActivityStatusProps {
     // Optional project ID
     project?: string;
     // Optional task ID
@@ -23,7 +22,7 @@ export interface IActivityStatus {
     // If the activity has been cancelled
     cancelled: boolean;
     // The concrete status ID
-    concreteStatus: ConcreteActivityStatus;
+    concreteStatus: SilkActivityStatusConcrete;
     // If there was an error, this contains the exception message
     exceptionMessage?: string | null;
     // The runtime in ms
@@ -33,10 +32,8 @@ export interface IActivityStatus {
     // The queue time spent waiting before workflow is executed as date time, e.g. "2021-09-07T09:34:53.153Z"
     queueTime?: string;
 }
-export type SilkActivityStatusProps = IActivityStatus;
 
-// @deprecated use `SilkActivityStatusConcrete`
-export type ConcreteActivityStatus =
+export type SilkActivityStatusConcrete =
     | "Cancelled"
     | "Failed"
     | "Successful"
@@ -44,4 +41,3 @@ export type ConcreteActivityStatus =
     | "Running"
     | "Waiting"
     | "Canceling";
-export type SilkActivityStatusConcrete = ConcreteActivityStatus;

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -83,9 +83,6 @@ export interface ActivityControlWidgetProps extends TestableComponent {
     timerExecutionMsg?: JSX.Element | null;
 }
 
-// @deprecated use `ActivityControlWidgetProps`
-export type IActivityControlProps = ActivityControlWidgetProps;
-
 interface IActivityContextMenu extends TestableComponent {
     // Tooltip for the context menu
     tooltip?: string;
@@ -106,9 +103,6 @@ export interface ActivityControlWidgetAction extends TestableComponent {
     hasStateWarning?: boolean;
 }
 
-// @deprecated use `ActivityControlWidgetAction`
-export type IActivityAction = ActivityControlWidgetAction;
-
 interface IActivityMenuAction extends ActivityControlWidgetAction {
     // Optional link
     href?: string;

package/src/cmem/ActivityControl/SilkActivityControl.tsx

@@ -4,7 +4,7 @@ import { Intent } from "@blueprintjs/core/src/common/intent";
 import { Icon, Spacing } from "../../";
 import { IntentTypes } from "../../common/Intent";
 import { TestableComponent } from "../../components/interfaces";
-import { ElapsedDateTimeDisplay, TimeUnits } from "../DateTimeDisplay/ElapsedDateTimeDisplay";
+import { ElapsedDateTimeDisplay, ElapsedDateTimeDisplayUnits } from "../DateTimeDisplay/ElapsedDateTimeDisplay";
 
 import { SilkActivityStatusConcrete, SilkActivityStatusProps } from "./ActivityControlTypes";
 import { ActivityControlWidget, ActivityControlWidgetProps } from "./ActivityControlWidget";
@@ -42,13 +42,13 @@ export interface SilkActivityControlProps extends TestableComponent {
         action: string | (() => any);
     };
     // DI activity actions
-    executeActivityAction: (action: ActivityAction) => void;
+    executeActivityAction: (action: SilkActivityControlAction) => void;
     /** If specified, the activity control will offer a "Start prioritized" button while the activity is in the waiting state.
      * When the button is clicked it should start the activity via the startPrioritized endpoint.
      */
     executePrioritized?: () => void;
     // Get the translation for a specific key
-    translate: (key: ActivityControlTranslationKeys) => string;
+    translate: (key: SilkActivityControlTranslationKeys) => string;
     // When defined the elapsed time since the last start is displayed next to the label
     elapsedTimeOfLastStart?: {
         // Prefix before the elapsed time
@@ -56,7 +56,7 @@ export interface SilkActivityControlProps extends TestableComponent {
         // Suffix after the elapsed time
         suffix?: string;
         // The translation of the time units
-        translate: (unit: TimeUnits) => string;
+        translate: (unit: ElapsedDateTimeDisplayUnits) => string;
     };
     // configure how the widget is displayed
     layoutConfig?: SilkActivityControlLayoutProps;
@@ -65,7 +65,7 @@ export interface SilkActivityControlProps extends TestableComponent {
     /**
      * The translation of the time units
      */
-    translateUnits?: (unit: TimeUnits) => string;
+    translateUnits?: (unit: ElapsedDateTimeDisplayUnits) => string;
 }
 
 export interface SilkActivityControlLayoutProps {
@@ -83,9 +83,6 @@ export interface SilkActivityControlLayoutProps {
     labelWrapper?: JSX.Element;
 }
 
-// @deprecated use `SilkActivityControlLayoutProps`
-export type IActivityControlLayoutProps = SilkActivityControlLayoutProps;
-
 const defaultLayout: SilkActivityControlLayoutProps = {
     small: false,
     border: false,
@@ -131,9 +128,6 @@ export interface SilkActivityExecutionReportProps {
     stackTrace?: IStacktrace;
 }
 
-// @deprecated use `SilkActivityExecutionReportProps`
-export type IActivityExecutionReport = SilkActivityExecutionReportProps;
-
 interface IStacktrace {
     // The final error message of the stacktrace
     errorMessage?: string;
@@ -143,17 +137,13 @@ interface IStacktrace {
     cause?: IStacktrace;
 }
 
-// @deprecated use `SilkActivityControlTranslationKeys`
-export type ActivityControlTranslationKeys =
+export type SilkActivityControlTranslationKeys =
     | "startActivity"
     | "stopActivity"
     | "reloadActivity"
     | "showErrorReport"
     | "startPrioritized";
-export type SilkActivityControlTranslationKeys = ActivityControlTranslationKeys;
-// @deprecated use `SilkActivityControlAction`
-export type ActivityAction = "start" | "cancel" | "restart";
-export type SilkActivityControlAction = ActivityAction;
+export type SilkActivityControlAction = "start" | "cancel" | "restart";
 
 /** Silk activity control. */
 export function SilkActivityControl(props: SilkActivityControlProps) {
@@ -178,7 +168,7 @@ export function useSilkActivityControl({
     layoutConfig = defaultLayout,
     hideMessageOnStatus = () => false,
     executePrioritized,
-    translateUnits = (unit: TimeUnits) => unit.toString(),
+    translateUnits = (unit: ElapsedDateTimeDisplayUnits) => unit.toString(),
     ...props
 }: SilkActivityControlProps) {
     const [activityStatus, setActivityStatus] = useState<SilkActivityStatusProps | undefined>(initialStatus);