Release process changes from v26.0.0

CHANGELOG.md

@@ -6,6 +6,15 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+## [26.0.0] - 2026-07-08
+
+This is a major release, and it might not be compatible with your current usage of our library. Please read about the necessary changes in the migration section below.
+
+### Migration from v25 to v26
+
+- remove deprecated components, properties and imports from your project; if the info cannot be found here, it was already mentioned in the **Deprecated** sections of past changelogs
+- apply changes mentioned in the **Changed** subsection
+
 ### Added
 
 - `<NotAvailable />`
@@ -15,34 +24,38 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - `<ContextMenu />`
     - `togglerSize`: replaces the deprecated `togglerLarge` property
 - `<MultiSelect />`
-    - `searchListPredicate` property: Allows to filter the complete list of search options at once.
-    - Following optional BlueprintJs properties are forwarded now to override default behaviour: `noResults`, `createNewItemRenderer` and `itemRenderer`
-    - `isValidNewOption` property: Checks if an input string is or can be turned into a valid new option.
-- `ActivityControlWidge`
+    - `searchListPredicate` property: allows filtering of the complete list of search options at once
+    - the following optional BlueprintJS properties are now forwarded to override default behaviour: `noResults`, `createNewItemRenderer` and `itemRenderer`
+    - `isValidNewOption` property: checks if an input string is or can be turned into a valid new option
+- `ActivityControlWidget`
     - Support `badge` on activity control menu button.
+- new icons:
+    - `module-marketplace`
+    - `artefact-ruleblock`
 
 ### Fixed
 
 - `<MultiSelect />`
-    - border of the BlueprintJS `Tag` elements were fixed
+    - borders of the BlueprintJS `Tag` elements were fixed
 - `extendedTooltip` of a handle in the ReactFlow (v12) component does not show the tooltip.
 - `<CodeEditor />`
     - `readOnly` appearance uses same borders like read-only text fields and it does not display a blinking cursor
 - `<Button />`, `<IconButton />`
-    - outlines for focus by keyboard navigation are better recognizable on buttons with colored backgrounds (intent states)
+    - outlines for focus by keyboard navigation are more recognizable on buttons with colored backgrounds (intent states)
 - `<Tooltip />`
     - given `popoverClassName` is added
 
 ### Changed
 
 - **React and its types were updated to v18, so you may hit incompatibilities if you run it with React 16 or 17.**
 - `color` library was upgraded from v4 to v5, so the types changed
-    - if you forward properties then they cannot have `Color` as type, use `ColorLike`
+    - if you forward properties, they can no longer have `Color` as their type; use `ColorLike` instead
 - `@blueprintjs/core` library was updated to v6
+    - if you use an explicit BlueprintJS import in your project, you need to set `"@blueprintjs/core": "6.8.1"` and `"@blueprintjs/select": "6.1.1"`
     - you may need to update class names in your tests (the new prefix is `bp6-`)
     - `Toaster.create` is now an async function
 - `<MultiSelect />`
-    - by default, if no searchPredicate or searchListPredicate is defined, the filtering is done via case-insensitive multi-word filtering.
+    - by default, if no `searchPredicate` or `searchListPredicate` is defined, the filtering is done via case-insensitive multi-word matching
 - `<ProgressBar />`, `<MenuItem />`, `<FieldSet />`, `<FieldItem />`, `<Tooltip />`, `<MultiSuggestField />`
     - color for `intent="primary"` was changed to our brand color
     - new option `accent` for `intent` uses the accent color
@@ -51,10 +64,30 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Deprecated
 
+- support for React Flow v9 is retained for now, but will be removed in v27
 - `<ContextMenu />`
     - `togglerLarge`: replaced by the more versatile `togglerSize` property
 - `<MultiSelect />`
-    - `searchPredicate`: replaced by the -- in some cases -- more efficient `searchListPredicate`
+    - `searchPredicate`: replaced by `searchListPredicate`, which is more efficient in some cases
+- `DefinitionsBlueprint`: use `IntentBlueprint`, this is now usable as type and enum var
+
+### Removed
+
+- renamed React Flow types and components; use the new names directly:
+    - `NodeContentHandleProps`: use `HandleDefaultProps`
+    - `ReactFlow`: use `ReactFlowExtended`
+    - `MiniMapV9Props`, `MiniMapV9`, `MiniMapV12Props` and `MiniMapV12`: use `MiniMapProps` and `MiniMap`; use `flowVersion` if the React Flow version is not recognized automatically
+    - `EdgeDefaultV9` and `EdgeDefaultV12`: use `EdgeDefault`
+    - `EdgeDefs`: use `ReactFlowMarkers`
+- `autoCompleteFieldUtils`: use `suggestFieldUtils`
+- `CodeMirror.outerDivAttributes`: use all properties directly on `CodeEditor`
+- `MultiSuggestField.ofType`: use `<MultiSuggestField<TYPE>>`
+- `StringPreviewContentBlobToggler.firstNonEmptyLineOnly`: use `useOnly="firstNonEmptyLine"`
+- color configuration is no longer possible via the previously used SCSS variables
+    - `$eccgui-color-primary`, `$eccgui-color-primary-contrast`, `$eccgui-color-accent`, `$eccgui-color-accent-contrast`,
+      `$eccgui-color-success-text`, `$eccgui-color-success-background`, `$eccgui-color-info-text`, `$eccgui-color-info-background`,
+      `$eccgui-color-warning-text`, `$eccgui-color-warning-background`, `$eccgui-color-danger-text`, `$eccgui-color-danger-background`
+    - use `$eccgui-color-palette-light` instead
 
 ## [25.2.0] - 2026-04-30
 
@@ -69,7 +102,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 - `<Pagination />`
     - improve breakpoints to display widgets for page size and page number inside smaller containers
-    - male the breakpoints configurable via SCSS
+    - make the breakpoints configurable via SCSS
 
 ## [25.1.0] - 2026-04-13
 
@@ -443,7 +476,7 @@ If you use Jest then you can use the same aliases for the `moduleNameMapper` con
 
 - `HandleV9Props` and `HandleV10Props` export will be removed, use only `HandleDefaultProps`
 - `<NodeContent />`
-    - `businessDate`: will be removed because it is already not used
+    - `businessData`: will be removed because it is already not used
 - `<ReactFlow />`: use `<ReactFlowExtended />`
 
 ### Migration from v24 to v25

README.md

@@ -74,12 +74,8 @@ $eccgui-color-palette-light: (
 
 All palette colors will be transformed into CSS custom properties automatically and can be referenced by name scheme `--eccgui-color-palette-{groupname}-{colortint}-{colorweight}`, e.g. `--eccgui-color-palette-identity-brand-100`.
 
-All other colors are based on the palette but it is still possible to set them before the default values are used by importing the configuration or the full library.
+All other colors are based on the palette, but it is still possible to set a few special color configurations before the default values are used by importing the configuration or the full library.
 
-- `$eccgui-color-primary`: color for very important buttons and switches
-- `$eccgui-color-primary-contrast`: readable text color used on primary color areas
-- `$eccgui-color-accent`: color for most conformation buttons, links, etc
-- `$eccgui-color-accent-contrast`: readable text color used on accent color areas
 - `$eccgui-color-applicationheader-text`
 - `$eccgui-color-applicationheader-background`
 - `$eccgui-color-workspace-text`

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": "25.2.0",
+    "version": "26.0.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -184,7 +184,8 @@
         "hast-util-from-parse5": "8.0.0",
         "**/lodash": "^4.18.1",
         "**/minimatch": "^3.1.4",
-        "**/serialize-javascript": "^7.0.5"
+        "**/serialize-javascript": "^7.0.5",
+        "**/ws": "^8.21.0"
     },
     "husky": {
         "hooks": {

src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -22,7 +22,6 @@ export interface StringPreviewContentBlobTogglerProps extends Omit<
     /**
      * Use only parts of `content` in the preview.
      * `firstMarkdownSection` uses the content until the first double line return.
-     * Currently overwritten by `firstNonEmptyLineOnly`.
      */
     useOnly?: "firstNonEmptyLine" | "firstMarkdownSection";
     /**
@@ -38,12 +37,6 @@ export interface StringPreviewContentBlobTogglerProps extends Omit<
      * This allows to add non-string elements to both the full-view content and the pure string content.
      */
     noTogglerContentSuffix?: React.JSX.Element;
-    /**
-     * If only the first non-empty line should be shown in the preview.
-     * This will in addition also be shortened according to `previewMaxLength`.
-     * @deprecated (v26) use `useOnly="firstNonEmptyLine"` instead
-     */
-    firstNonEmptyLineOnly?: boolean;
 }
 
 /** Version of the content toggler for text centric content. */
@@ -59,16 +52,10 @@ export function StringPreviewContentBlobToggler({
     renderPreviewAsMarkdown = false,
     allowedHtmlElementsInPreview,
     noTogglerContentSuffix,
-    firstNonEmptyLineOnly,
     ...otherContentBlobTogglerProps
 }: StringPreviewContentBlobTogglerProps) {
-    // need to test `firstNonEmptyLineOnly` until property is removed
-    const useOnlyTest: StringPreviewContentBlobTogglerProps["useOnly"] = firstNonEmptyLineOnly
-        ? "firstNonEmptyLine"
-        : useOnly;
-
     let previewString = content;
-    switch (useOnlyTest) {
+    switch (useOnly) {
         case "firstNonEmptyLine":
             previewString = useOnlyPart(content, regexFirstNonEmptyLine);
             break;

src/cmem/react-flow/ReactFlow/ReactFlow.tsx

@@ -208,10 +208,5 @@ export const ReactFlowExtended = React.forwardRef(ReactFlowExtendedPlain) as <T
     p: T & { ref?: Ref<HTMLDivElement> },
 ) => ReactElement;
 
-/**
- * @deprecated (v26) use `ReactFlowExtended`
- */
-export const ReactFlow = ReactFlowExtended;
-
 /** Classes that when set for an element, prevent that they trigger react-flow dragging, wheel and panning actions. */
 export const preventReactFlowActionsClasses = "nodrag nopan nowheel";

src/cmem/react-flow/extensions/scrollOnDragHook.ts

@@ -281,6 +281,6 @@ export const useReactFlowScrollOnDragV9 = ({ reactFlowProps, scrollOnDrag }: IPr
 };
 
 /**
- * @deprecated (v26) Currently it ony supports ReactFlow v9. Better to `useReactFlowScrollOnDragV9` for now.
+ * @deprecated (v27) Currently it only supports ReactFlow v9. Better to `useReactFlowScrollOnDragV9` for now.
  */
 export const useReactFlowScrollOnDrag = useReactFlowScrollOnDragV9;

src/common/Intent/index.ts

@@ -2,13 +2,15 @@ import { Intent as BlueprintIntent } from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type IntentBlueprint = BlueprintIntent;
+/** @deprecated (v27) use `IntentBlueprint` instead */
 export const DefinitionsBlueprint = BlueprintIntent;
+export const IntentBlueprint = BlueprintIntent;
+export type IntentBlueprint = BlueprintIntent;
 
 export type IntentTypes = IntentBlueprint | "neutral" | "accent" | "info";
 
 export const Definitions: { [key: string]: IntentTypes } = {
-    ...DefinitionsBlueprint,
+    ...IntentBlueprint,
     ACCENT: "accent",
     NEUTRAL: "neutral",
     INFO: "info",

src/common/index.ts

@@ -11,6 +11,7 @@ import { openInNewTab } from "./utils/openInNewTab";
 import { reduceToText } from "./utils/reduceToText";
 export type { DecodeOptions as DecodeHtmlEntitiesOptions } from "he";
 export type { IntentTypes as IntentBaseTypes } from "./Intent";
+export { IntentBlueprint } from "./Intent";
 
 export const utils = {
     openInNewTab,

src/components/Button/Button.tsx

@@ -4,9 +4,9 @@ import {
     AnchorButtonProps as BlueprintAnchorButtonProps,
     Button as BlueprintButton,
     ButtonProps as BlueprintButtonProps,
-    Intent as BlueprintIntent,
 } from "@blueprintjs/core";
 
+import { IntentBlueprint } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ValidIconName } from "../Icon/canonicalIconNames";
 import Icon from "../Icon/Icon";
@@ -33,7 +33,7 @@ interface AdditionalButtonProps {
     /**
      * Intent state visualized by color.
      */
-    intent?: BlueprintIntent | "accent";
+    intent?: IntentBlueprint | "accent";
     /**
      * Content displayed in a badge that is attached to the button.
      * By default it is displayed `{ size: "small", position: "top-right", maxLength: 2 }` and with the same intent state of the button.
@@ -94,7 +94,7 @@ export const Button = ({
             intentByFunction = "accent";
             break;
         case disruptive:
-            intentByFunction = BlueprintIntent.DANGER;
+            intentByFunction = IntentBlueprint.DANGER;
             break;
         default:
             break;
@@ -111,7 +111,7 @@ export const Button = ({
         <ButtonType
             {...restProps}
             className={`${eccgui}-button ` + className}
-            intent={(intent || intentByFunction) as BlueprintIntent}
+            intent={(intent || intentByFunction) as IntentBlueprint}
             icon={typeof icon === "string" ? <Icon name={icon} {...iconSize} /> : icon}
             rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} {...iconSize} /> : rightIcon}
         >

src/components/Icon/canonicalIconNames.tsx

@@ -121,6 +121,7 @@ const canonicalIcons = {
     "module-dashboard": icons.Dashboard,
     "module-gdprsearch": icons.UserProfile,
     "module-integrations": icons.AppConnectivity,
+    "module-marketplace": icons.ShoppingCatalog,
     "module-linkedrules": icons.Connect,
     "module-reports": icons.ReportData,
     "module-search": icons.Search,

src/components/MultiSelect/MultiSelect.tsx

@@ -1,12 +1,13 @@
 import React, { useRef } from "react";
-import { HTMLInputProps as BlueprintHTMLInputProps, Intent as BlueprintIntent } from "@blueprintjs/core";
+import { HTMLInputProps as BlueprintHTMLInputProps } from "@blueprintjs/core";
 import {
     ItemRendererProps as BlueprintItemRendererProps,
     MultiSelect as BlueprintMultiSelect,
     MultiSelectProps as BlueprintMultiSelectProps,
 } from "@blueprintjs/select";
 import classNames from "classnames";
 
+import { IntentBlueprint } from "../../common/Intent";
 import { removeExtraSpaces } from "../../common/utils/stringUtils";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
@@ -97,7 +98,7 @@ export interface MultiSuggestFieldCommonProps<T>
     /**
      * Intent state of the multi select.
      */
-    intent?: BlueprintIntent | "accent";
+    intent?: IntentBlueprint | "accent";
     /**
      * Disables the input element
      */
@@ -620,11 +621,3 @@ export function MultiSuggestField<T>({
         <>{contentMultiSelect}</>
     );
 }
-
-// we still return the Blueprint element here because it was already used like that
-/**
- * @deprecated (v26) use directly <MultiSuggestField<TYPE>> (`ofType` also returns the original BlueprintJS element, not ours!)
- */
-MultiSuggestField.ofType = BlueprintMultiSelect.ofType;
-
-export default MultiSuggestField;

src/components/SuggestField/index.ts

@@ -6,6 +6,3 @@ export * from "./../AutocompleteField/interfaces";
 export const suggestFieldUtils = {
     createNewItemRendererFactory,
 };
-
-// @deprecated (v26) use `suggestFieldUtils`
-export const autoCompleteFieldUtils = suggestFieldUtils;

src/components/TextField/TextArea.tsx

@@ -1,13 +1,12 @@
 import React from "react";
 import {
     Classes as BlueprintClassNames,
-    Intent as BlueprintIntent,
     MaybeElement,
     TextArea as BlueprintTextArea,
     TextAreaProps as BlueprintTextAreaProps,
 } from "@blueprintjs/core";
 
-import { Definitions as IntentDefinitions, IntentTypes } from "../../common/Intent";
+import { Definitions as IntentDefinitions, IntentBlueprint, IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { Icon } from "../Icon";
 import { ValidIconName } from "../Icon/canonicalIconNames";
@@ -155,7 +154,7 @@ export const TextArea = ({
             }
             intent={
                 intent && !["info", "edited", "removed", "neutral", "accent"].includes(intent)
-                    ? (intent as BlueprintIntent)
+                    ? (intent as IntentBlueprint)
                     : undefined
             }
             spellCheck={intent === "removed" ? false : undefined}

src/components/TextField/TextField.tsx

@@ -4,11 +4,10 @@ import {
     HTMLInputProps,
     InputGroup as BlueprintInputGroup,
     InputGroupProps as BlueprintInputGroupProps,
-    Intent as BlueprintIntent,
     MaybeElement,
 } from "@blueprintjs/core";
 
-import { Definitions as IntentDefinitions, IntentTypes } from "../../common/Intent";
+import { Definitions as IntentDefinitions, IntentBlueprint, IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ValidIconName } from "../Icon/canonicalIconNames";
 import Icon from "../Icon/Icon";
@@ -108,7 +107,7 @@ export const TextField = ({
             }
             intent={
                 intent && !["info", "edited", "removed", "neutral", "accent"].includes(intent)
-                    ? (intent as BlueprintIntent)
+                    ? (intent as IntentBlueprint)
                     : undefined
             }
             fill={fullWidth}

src/components/Tooltip/Tooltip.tsx

@@ -8,6 +8,7 @@ import {
 import classNames from "classnames";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { IntentBlueprint } from "../../common/Intent";
 
 import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
 
@@ -52,7 +53,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position" | "
     /**
      * Intent state of the tooltip.
      */
-    intent?: BlueprintTooltipProps["intent"] | "accent";
+    intent?: IntentBlueprint | "accent";
 }
 
 export type TooltipSize = "small" | "medium" | "large";