@eccenca/gui-elements 24.1.0 → 24.2.0-featuresupportprojectvariableautocompletioncmem5572.0

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.1.0",
+    "version": "24.2.0-featuresupportprojectvariableautocompletioncmem5572.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -68,42 +68,44 @@
         "autolint:all": "yarn autolint:scripts && yarn autolint:styles && yarn autolint:prettier"
     },
     "dependencies": {
-        "@blueprintjs/colors": "^5.1.5",
-        "@blueprintjs/core": "^5.16.2",
-        "@blueprintjs/select": "^5.3.7",
-        "@carbon/icons": "^11.53.0",
-        "@carbon/react": "1.72.0",
-        "@codemirror/lang-javascript": "^6.2.2",
+        "@blueprintjs/colors": "^5.1.8",
+        "@blueprintjs/core": "^5.18.0",
+        "@blueprintjs/select": "^5.3.19",
+        "@carbon/icons": "^11.58.0",
+        "@carbon/react": "^1.80.1",
+        "@codemirror/lang-javascript": "^6.2.3",
         "@codemirror/lang-json": "^6.0.1",
-        "@codemirror/lang-markdown": "^6.3.1",
+        "@codemirror/lang-markdown": "^6.3.2",
         "@codemirror/lang-sql": "^6.8.0",
         "@codemirror/lang-xml": "^6.1.0",
         "@codemirror/lang-yaml": "^6.1.2",
-        "@codemirror/legacy-modes": "^6.4.2",
+        "@codemirror/legacy-modes": "^6.5.0",
         "@mavrin/remark-typograf": "^2.2.0",
         "classnames": "^2.5.1",
         "codemirror": "^6.0.1",
         "color": "^4.2.3",
-        "compute-scroll-into-view": "^3.1.0",
+        "compute-scroll-into-view": "^3.1.1",
         "jshint": "^2.13.6",
         "lodash": "^4.17.21",
-        "n3": "^1.23.1",
+        "n3": "^1.25.1",
         "re-resizable": "^6.10.3",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-flow-renderer": "9.7.4",
         "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
         "react-inlinesvg": "^3.0.3",
-        "react-markdown": "^8.0.7",
+        "react-markdown": "^10.1.0",
+        "react-markdown-deprecated": "npm:react-markdown@^8.0.7",
         "react-syntax-highlighter": "^15.6.1",
-        "rehype-raw": "^6.1.1",
-        "remark-definition-list": "^1.2.0",
-        "remark-gfm": "^3.0.1",
-        "remark-parse": "^10.0.2",
+        "rehype-external-links": "^3.0.0",
+        "rehype-raw": "^7.0.0",
+        "remark-definition-list": "^2.0.0",
+        "remark-gfm": "^4.0.1",
+        "remark-parse": "^11.0.0",
         "reset-css": "^5.0.2",
         "unified": "^11.0.5",
         "wicg-inert": "^3.1.3",
-        "xml-formatter": "^3.6.3"
+        "xml-formatter": "^3.6.5"
     },
     "devDependencies": {
         "@babel/core": "^7.26.10",
@@ -114,42 +116,42 @@
         "@babel/preset-flow": "^7.25.9",
         "@babel/preset-react": "^7.26.3",
         "@babel/preset-typescript": "^7.27.0",
-        "@eslint/compat": "^1.2.4",
-        "@eslint/eslintrc": "^3.2.0",
-        "@eslint/js": "^9.17.0",
-        "@storybook/addon-actions": "^8.6.9",
-        "@storybook/addon-essentials": "^8.6.9",
-        "@storybook/addon-jest": "^8.6.9",
-        "@storybook/addon-links": "^8.6.9",
-        "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
-        "@storybook/cli": "^8.6.9",
+        "@eslint/compat": "^1.2.8",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "^9.24.0",
+        "@storybook/addon-actions": "^8.6.12",
+        "@storybook/addon-essentials": "^8.6.12",
+        "@storybook/addon-jest": "^8.6.12",
+        "@storybook/addon-links": "^8.6.12",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+        "@storybook/cli": "^8.6.12",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^8.6.9",
-        "@storybook/react-webpack5": "^8.6.9",
-        "@storybook/test": "^8.6.9",
+        "@storybook/react": "^8.6.12",
+        "@storybook/react-webpack5": "^8.6.12",
+        "@storybook/test": "^8.6.12",
         "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/react": "^12.1.2",
+        "@testing-library/react": "^12.1.5",
         "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
         "@types/jest": "^29.5.14",
         "@types/jshint": "^2.12.4",
-        "@types/lodash": "^4.17.13",
-        "@types/n3": "^1.21.1",
+        "@types/lodash": "^4.17.16",
+        "@types/n3": "^1.24.2",
         "@types/react-syntax-highlighter": "^15.5.13",
-        "@typescript-eslint/eslint-plugin": "^8.18.1",
-        "@typescript-eslint/parser": "^8.18.1",
+        "@typescript-eslint/eslint-plugin": "^8.30.1",
+        "@typescript-eslint/parser": "^8.30.1",
         "babel-jest": "^29.7.0",
-        "chromatic": "^11.27.0",
-        "eslint": "^9.17.0",
-        "eslint-plugin-react": "^7.37.2",
-        "eslint-plugin-react-hooks": "^5.1.0",
+        "chromatic": "^11.28.0",
+        "eslint": "^9.24.0",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-pnp-resolver": "^1.2.3",
-        "lint-staged": "^15.2.11",
+        "lint-staged": "^15.5.1",
         "node-sass-package-importer": "^5.3.3",
         "path": "^0.12.7",
         "prettier": "^2.8.8",
@@ -159,10 +161,10 @@
         "rimraf": "^5.0.10",
         "sass": "1.62.1",
         "sass-loader": "10.3.1",
-        "storybook": "^8.6.9",
-        "stylelint": "^15.11.0",
-        "stylelint-config-recess-order": "^4.6.0",
-        "stylelint-config-standard-scss": "^9.0.0",
+        "storybook": "^8.6.12",
+        "stylelint": "^16.18.0",
+        "stylelint-config-recess-order": "^6.0.0",
+        "stylelint-config-standard-scss": "^14.0.0",
         "ts-node": "^10.9.2",
         "tsc-esm-fix": "^3.1.2",
         "typescript": "5.5.3",
@@ -175,12 +177,9 @@
         "react-dom": ">=16"
     },
     "resolutions": {
-        "**/@types/react": "^17.0.83",
+        "**/@types/react": "^17.0.85",
         "node-sass-package-importer/**/postcss": "^8.4.49",
-        "**/cross-spawn": "^7.0.5 ",
-        "**/micromatch": "^4.0.8",
-        "**/@babel/runtime": "^7.26.10",
-        "**/@babel/helpers": "^7.26.10"
+        "hast-util-from-parse5": "8.0.0"
     },
     "husky": {
         "hooks": {

package/src/cmem/markdown/Markdown.tsx

@@ -1,15 +1,21 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
-import { PluggableList } from "react-markdown/lib/react-markdown";
+/**
+ * Recreate the old type to provide support until next major
+ */
+import { PluggableList as PluggableListDeprecated } from "react-markdown-deprecated/lib/react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 // @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 rehypeExternalLinks from "rehype-external-links";
 import rehypeRaw from "rehype-raw";
 import { remarkDefinitionList } from "remark-definition-list";
 import remarkGfm from "remark-gfm";
+import { PluggableList as PluggableListUnified } from "unified";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { HtmlContentBlock, HtmlContentBlockProps, TestableComponent } from "../../index";
+type PluggableList = PluggableListUnified | PluggableListDeprecated;
 
 export interface MarkdownProps extends TestableComponent {
     children: string;
@@ -35,6 +41,7 @@ export interface MarkdownProps extends TestableComponent {
     /**
      * Additional reHype plugins to execute.
      * @see https://github.com/remarkjs/react-markdown#architecture
+     * @deprecated (v25) this property won't support `PluggableList` from "react-markdown/lib/react-markdown" with the next major version, only the one from `unified` will be supported then.
      */
     reHypePlugins?: PluggableList;
     /**
@@ -54,9 +61,9 @@ const configDefault = {
         @see https://github.com/remarkjs/react-markdown#api
     */
     // @see https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
-    remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as PluggableList,
+    remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as PluggableListUnified,
     // @see https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
-    rehypePlugins: [] as PluggableList,
+    rehypePlugins: [] as PluggableListUnified,
     allowedElements: [
         // default markdown
         "a",
@@ -110,6 +117,13 @@ export const Markdown = ({
     htmlContentBlockProps,
     ...otherProps
 }: MarkdownProps) => {
+    const configHtmlExternalLinks = {
+        rel: ["nofollow"],
+        target: linkTargetName,
+    };
+
+    configDefault.rehypePlugins = configDefault.rehypePlugins.concat([[rehypeExternalLinks, configHtmlExternalLinks]]);
+
     const configHtml = allowHtml
         ? {
               rehypePlugins: [...configDefault.rehypePlugins].concat([rehypeRaw]),
@@ -132,14 +146,10 @@ export const Markdown = ({
         ...configDefault,
         ...configHtml,
         ...configTextOnly,
-        linkTarget: linkTargetName
-            ? (href: string, _children: any, _title: string) => {
-                  const linkTarget = href.charAt(0) !== "#" ? linkTargetName : "";
-                  return linkTarget as React.HTMLAttributeAnchorTarget;
-              }
-            : undefined,
         components: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             code(props: any) {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 const { children, className, node, inline, ...rest } = props;
                 const match = /language-(\w+)/.exec(className || "");
                 return match ? (
@@ -159,14 +169,15 @@ export const Markdown = ({
                 );
             },
         },
+        allowedElements,
     };
-    allowedElements && (reactMarkdownProperties.allowedElements = allowedElements);
-    reHypePlugins &&
-        reHypePlugins.forEach(
-            (plugin) => (reactMarkdownProperties.rehypePlugins = [...reactMarkdownProperties.rehypePlugins, plugin])
+
+    if (reHypePlugins) {
+        reactMarkdownProperties.rehypePlugins = reactMarkdownProperties.rehypePlugins.concat(
+            reHypePlugins as PluggableListUnified
         );
+    }
 
-    // @ts-ignore because against the lib spec it does not allow a function for linkTarget.
     const markdownDisplay = <ReactMarkdown {...reactMarkdownProperties} />;
     return inheritBlock && !(otherProps["data-test-id"] || htmlContentBlockProps) ? (
         markdownDisplay

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

@@ -9,7 +9,12 @@ describe("Highlight search words reHype plugin", () => {
         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)] });
+        const markNode = (text: string): Element => ({
+            type: "element",
+            tagName: "mark",
+            properties: {},
+            children: [textNode(text)],
+        });
         const result = highlightSearchWordTransformer(
             {
                 type: "root",
@@ -17,12 +22,13 @@ describe("Highlight search words reHype plugin", () => {
                     {
                         type: "element",
                         tagName: "p",
+                        properties: {},
                         children: [textNode("Text with abc query words xyz.")],
                     },
                 ],
             },
             new VFile(),
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
+
             () => {}
         );
         const rootChildren = (result as Root).children;

package/src/cmem/markdown/highlightSearchWords.ts

@@ -25,7 +25,12 @@ const highlightSearchWordsPluginFactory = (searchQuery: string | undefined) => {
         let matchArray = multiWordRegex.exec(text);
         while (matchArray !== null) {
             result.push(createTextNode(text.slice(offset, matchArray.index)));
-            result.push({ type: "element", tagName: "mark", children: [createTextNode(matchArray[0])] });
+            result.push({
+                type: "element",
+                tagName: "mark",
+                properties: {},
+                children: [createTextNode(matchArray[0])],
+            });
             offset = multiWordRegex.lastIndex;
             matchArray = multiWordRegex.exec(text);
         }

package/src/common/Intent/index.ts

@@ -1,16 +1,16 @@
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Intent as BlueprintIntent } from "@blueprintjs/core";
 
-export type IntentTypes = "none" | "neutral" | "primary" | "accent" | "info" | "success" | "warning" | "danger";
+export type IntentBlueprint = BlueprintIntent;
+export const DefinitionsBlueprint = BlueprintIntent;
+
+export type IntentTypes = IntentBlueprint | "neutral" | "accent" | "info";
 
 export const Definitions: { [key: string]: IntentTypes } = {
-    PRIMARY: "primary",
+    ...DefinitionsBlueprint,
     ACCENT: "accent",
     NEUTRAL: "neutral",
-    NONE: "none",
-    SUCCESS: "success",
     INFO: "info",
-    WARNING: "warning",
-    DANGER: "danger",
 };
 
 export const intentClassName = (intent: IntentTypes) => {

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useEffect, useMemo, useState } from "react";
 import { Classes as BlueprintClassNames } from "@blueprintjs/core";
 import { EditorView, Rect } from "@codemirror/view";
@@ -165,6 +166,10 @@ export interface AutoSuggestionProps {
     /** If this is enabled the value of the editor is replaced with the initialValue if it changes.
      * FIXME: This property is a workaround for some "controlled" usages of the component via the initialValue property. */
     reInitOnInitialValueChange?: boolean;
+    /** Optional height of the component */
+    height?: number | string;
+    /** Set read-only mode. Default: false */
+    readOnly?: boolean;
 }
 
 // Meta data regarding a request
@@ -197,6 +202,8 @@ const AutoSuggestion = ({
     mode,
     multiline = false,
     reInitOnInitialValueChange = false,
+    height,
+    readOnly,
 }: AutoSuggestionProps) => {
     const value = React.useRef<string>(initialValue);
     const cursorPosition = React.useRef(0);
@@ -207,7 +214,7 @@ const AutoSuggestion = ({
     const suggestionRequestData = React.useRef<RequestMetaData>({ requestId: undefined });
     const [pathValidationPending, setPathValidationPending] = React.useState(false);
     const validationRequestData = React.useRef<RequestMetaData>({ requestId: undefined });
-    const [, setErrorMarkers] = React.useState<any[]>([]);
+    const errorMarkers = React.useRef<any[]>([]);
     const [validationResponse, setValidationResponse] = useState<CodeAutocompleteFieldValidationResult | undefined>(
         undefined
     );
@@ -219,8 +226,8 @@ const AutoSuggestion = ({
         CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
     >(undefined);
     const [cm, setCM] = React.useState<EditorView>();
-    const currentCm = React.useRef<EditorView>()
-    currentCm.current = cm
+    const currentCm = React.useRef<EditorView>();
+    currentCm.current = cm;
     const isFocused = React.useRef(false);
     const autoSuggestionDivRef = React.useRef<HTMLDivElement>(null);
     /** Mutable editor state, since this needs to be current in scope of the SingleLineEditorComponent. */
@@ -242,16 +249,16 @@ const AutoSuggestion = ({
                 changes: { from: 0, to: currentCm.current.state?.doc.length, insert: initialValue },
             });
             // Validate initial value change
-            checkValuePathValidity(initialValue)
+            checkValuePathValidity(initialValue);
         }
     }, [initialValue, reInitOnInitialValueChange]);
 
     React.useEffect(() => {
-        if(currentCm.current) {
+        if (currentCm.current) {
             // Validate initial value
-            checkValuePathValidity(initialValue)
+            checkValuePathValidity(initialValue);
         }
-    }, [currentCm.current!!])
+    }, [!!currentCm.current]);
 
     const setCurrentIndex = (newIndex: number) => {
         editorState.index = newIndex;
@@ -263,10 +270,9 @@ const AutoSuggestion = ({
         editorState.cm = cm;
     }, [cm, editorState]);
 
-    const dispatch = // eslint-disable-next-line @typescript-eslint/no-empty-function
-        (
-            typeof editorState?.cm?.dispatch === "function" ? editorState?.cm?.dispatch : () => {}
-        ) as EditorView["dispatch"];
+    const dispatch = (
+        typeof editorState?.cm?.dispatch === "function" ? editorState?.cm?.dispatch : () => {}
+    ) as EditorView["dispatch"];
 
     React.useEffect(() => {
         editorState.dropdownShown = shouldShowDropdown;
@@ -288,8 +294,9 @@ const AutoSuggestion = ({
                 return () => removeMarkFromText({ view: cm, from, to });
             }
         } else {
-            //remove redundant markers
-            cm && removeMarkFromText({ view: cm, from: 0, to: cm.state?.doc.length });
+            if (cm) {
+                removeMarkFromText({ view: cm, from: 0, to: cm.state?.doc.length });
+            }
         }
         return;
     }, [highlightedElement, selectedTextRanges, cm]);
@@ -298,9 +305,17 @@ const AutoSuggestion = ({
     React.useEffect(() => {
         const parseError = validationResponse?.parseError;
         if (cm) {
+            const clearCurrentErrorMarker = () => {
+                if (errorMarkers.current.length) {
+                    const [from, to] = errorMarkers.current;
+                    removeMarkFromText({ view: cm, from, to });
+                    errorMarkers.current = [];
+                }
+            };
             if (parseError) {
                 const { message, start, end } = parseError;
                 const { toOffset, fromOffset } = getOffsetRange(cm, start, end);
+                clearCurrentErrorMarker();
                 const { from, to } = markText({
                     view: cm,
                     from: fromOffset,
@@ -308,22 +323,14 @@ const AutoSuggestion = ({
                     className: `${eccgui}-autosuggestion__text--highlighted-error`,
                     title: message,
                 });
-
-                setErrorMarkers((previousMarkers) => {
-                    previousMarkers.forEach((m) => removeMarkFromText({ view: cm, from: m.from, to: m.to }));
-                    return [from, to];
-                });
+                errorMarkers.current = [from, to];
             } else {
-                // Valid, clear all error markers
-                setErrorMarkers((previous) => {
-                    previous.forEach((m) => removeMarkFromText({ view: cm, from: m.from, to: m.to }));
-                    return [];
-                });
+                clearCurrentErrorMarker();
             }
         }
 
         const isValid = validationResponse?.valid === undefined || validationResponse.valid;
-        onInputChecked && onInputChecked(isValid);
+        onInputChecked?.(isValid);
     }, [validationResponse?.valid, validationResponse?.parseError, cm, onInputChecked]);
 
     /** generate suggestions and also populate the replacement indexes dict */
@@ -390,6 +397,7 @@ const AutoSuggestion = ({
             try {
                 const result: CodeAutocompleteFieldValidationResult | undefined = await checkInput(inputString);
                 setValidationResponse(result);
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
             } catch (e) {
                 setValidationResponse(undefined);
                 // TODO: Error handling
@@ -425,6 +433,7 @@ const AutoSuggestion = ({
                         setSuggestionResponse(result);
                     }
                 }
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
             } catch (e) {
                 setSuggestionResponse(undefined);
                 // TODO: Error handling
@@ -445,12 +454,14 @@ const AutoSuggestion = ({
         [asyncHandleEditorInputChange, autoCompletionRequestDelay]
     );
 
-    const handleChange = (val: string) => {
-        value.current = val;
-        checkValuePathValidity.cancel();
-        checkValuePathValidity(value.current);
-        onChange(val);
-    };
+    const handleChange = React.useMemo(() => {
+        return (val: string) => {
+            value.current = val;
+            checkValuePathValidity.cancel();
+            checkValuePathValidity(value.current);
+            onChange(val);
+        };
+    }, [onChange, checkValuePathValidity]);
 
     const handleCursorChange = (cursor: number, coords: Rect, scrollinfo: HTMLElement, view: EditorView) => {
         //cursor here is offset from line 1, autosuggestion works with cursor per-line.
@@ -534,8 +545,13 @@ const AutoSuggestion = ({
     };
 
     const handleInputFocus = (focusState: boolean) => {
-        onFocusChange && onFocusChange(focusState);
-        focusState ? setShouldShowDropdown(true) : closeDropDown();
+        onFocusChange?.(focusState);
+        if (focusState) {
+            setShouldShowDropdown(true);
+        } else {
+            closeDropDown();
+        }
+
         if (!isFocused.current && focusState) {
             // Just got focus
             // Clear suggestions and repeat suggestion request, something else might have changed while this component was not focused
@@ -643,6 +659,8 @@ const AutoSuggestion = ({
                 showScrollBar={showScrollBar}
                 multiline={multiline}
                 onMouseDown={handleInputMouseDown}
+                height={height}
+                readOnly={readOnly}
             />
         );
     }, [

package/src/components/AutoSuggestion/ExtendedCodeEditor.tsx

@@ -61,6 +61,10 @@ export interface ExtendedCodeEditorProps {
         | "additionalExtensions"
         | "outerDivAttributes"
     >;
+    /** Optional height of the component */
+    height?: number | string;
+    /** Set read-only mode. Default: false */
+    readOnly?: boolean;
 }
 
 export type IEditorProps = ExtendedCodeEditorProps;
@@ -80,6 +84,8 @@ export const ExtendedCodeEditor = ({
     onCursorChange,
     onSelection,
     codeEditorProps,
+    height,
+    readOnly,
 }: ExtendedCodeEditorProps) => {
     const initialContent = React.useRef(multiline ? initialValue : initialValue.replace(/[\r\n]/g, " "));
     const multilineExtensions = multiline
@@ -104,6 +110,8 @@ export const ExtendedCodeEditor = ({
             mode={mode}
             name=""
             enableTab={enableTab}
+            height={height}
+            readOnly={readOnly}
             additionalExtensions={[...multilineExtensions]}
             outerDivAttributes={{
                 className: `${eccgui}-${

package/src/components/Button/Button.stories.tsx

@@ -18,6 +18,10 @@ export default {
         onClick: {
             action: "clicked",
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "primary", "success", "warning", "danger"],
+        },
     },
 } as Meta<typeof Button>;
 
@@ -67,17 +71,17 @@ const TemplateSemantic: StoryFn<typeof Button> = (args) => (
 export const ButtonSemantics = TemplateSemantic.bind({});
 ButtonSemantics.args = FullExample.args;
 
-const TemplateState: StoryFn<typeof Button> = (args) => (
+const TemplateIntent: StoryFn<typeof Button> = (args) => (
     <OverlaysProvider>
-        <Button {...args} text="Success" hasStateSuccess />
+        <Button {...args} text="Success" intent="success" />
         <Spacing vertical />
-        <Button {...args} text="Warning" hasStateWarning />
+        <Button {...args} text="Warning" intent="warning" />
         <Spacing vertical />
-        <Button {...args} text="Danger" hasStateDanger />
+        <Button {...args} text="Danger" intent="danger" />
     </OverlaysProvider>
 );
-export const ButtonStates = TemplateState.bind({});
-ButtonStates.args = FullExample.args;
+export const ButtonIntent = TemplateIntent.bind({});
+ButtonIntent.args = FullExample.args;
 
 const TemplateContent: StoryFn<typeof Button> = (args) => (
     <OverlaysProvider>

package/src/components/Button/Button.tsx

@@ -32,18 +32,22 @@ interface AdditionalButtonProps {
     elevated?: boolean;
     /**
      * The button is displayed with primary color scheme.
+     * @deprecated (v25) use `intent="primary"` instead.
      */
     hasStatePrimary?: boolean;
     /**
      * The button is displayed with success (some type of green) color scheme.
+     *  @deprecated (v25) use `intent="success"` instead.
      */
     hasStateSuccess?: boolean;
     /**
      * The button is displayed with warning (some type of orange) color scheme.
+     *  @deprecated (v25) use `intent="warning"` instead.
      */
     hasStateWarning?: boolean;
     /**
      * The button is displayed with danger (some type of red) color scheme.
+     *  @deprecated (v25) use `intent="danger"` instead.
      */
     hasStateDanger?: boolean;
     /**
@@ -100,6 +104,7 @@ export const Button = ({
     tooltipProps,
     badge,
     badgeProps = { size: "small", position: "top-right", maxLength: 2 },
+    intent,
     ...restProps
 }: ButtonProps) => {
     let intention;
@@ -120,13 +125,13 @@ export const Button = ({
             break;
     }
 
-    const ButtonType: any = restProps.href ? BlueprintAnchorButton : BlueprintButton;
+    const ButtonType = restProps.href ? BlueprintAnchorButton : BlueprintButton;
 
     const button = (
         <ButtonType
             {...restProps}
             className={`${eccgui}-button ` + className}
-            intent={intention}
+            intent={(intent || intention) as BlueprintIntent}
             icon={typeof icon === "string" ? <Icon name={icon} /> : icon}
             rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} /> : rightIcon}
         >

package/src/components/ContextOverlay/ContextMenu.stories.tsx

@@ -10,7 +10,7 @@ export default {
     subcomponents: { MenuItem },
     argTypes: {
         children: {
-            control: "none",
+            control: false,
         },
     },
 } as Meta<typeof ContextMenu>;