Merge branch 'release/v24.0.0' into feature/newMappingSuggestion-CMEM…

…-5433

# Conflicts:
#	CHANGELOG.md

CHANGELOG.md

@@ -6,10 +6,35 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+This is a major release, and it might be not compatible with your current usage of our library. Please read about the necessary changes in the section about how to migrate.
+
+### Migration from v23 to v24
+
+-   upgrade Typescript to v5
+-   upgrade Node to at least v18, see **Changed** section for more info about it
+-   remove deprecated components, properties and imports from your project, if the info cannot be found here then it was already mentioned in **Deprecated** sections of the past changelogs
+    -   `<GridColumn/>`
+        -   `full`: was deprecated and now removed because it always uses full width if it is the only column and does not have any othe size config
+    -   `<Notification/>`
+        -   `fullWidth`: was deprecated and now removed, use `flexWidth` as replacement
+        -   `iconName`: was deprecated and now removed, use `icon` property
+    -   `<Table/>`
+        -   `size`: use only "small", "medium" or "large" as value
+    -   `<Tag/>`
+        -   `emphasized`: was deprecated and now removed, use `minimal=false` plus `emphasis="stronger"` instead
+    -   `IconSized` type: use `CarbonIconType`
+    -   `TimeUnits` type: use `ElapsedDateTimeDisplayUnits`
+    -   `MarkdownParserProps` interface: use `MarkdownProps`
+    -   `elapsedTimeSegmented` function: use `elapsedDateTimeDisplayUtils.elapsedTimeSegmented`
+    -   `simplifiedElapsedTime` function: use `elapsedDateTimeDisplayUtils.simplifiedElapsedTime`
+
 ### Added
 
+-   `<StringPreviewContentBlobToggler />`:
+    -   `noTogglerContentSuffix`: Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary. This allows to add non-string elements to both the full-view content and the pure string content.
 -   `<MultiSuggestField />`
     -   An optional custom search function property has been added, it defines how to filter elements.
+    -   Added a prop `limitHeightOpened` to limit the height of the dropdown by automatically calculating the available height in vh.
 -   `<FlexibleLayoutContainer />` and `<FlexibleLayoutItem />`
     -   helper components to create flex layouts for positioning sub elements
     -   stop misusing `Toolbar*` components to do that (anti pattern)
@@ -18,6 +43,22 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<Label />`
     -   `emphasis` property to control visual appearance of the label text
 -   basic Storybook example for `<Application* />` components
+-   `<CodeEditor />`
+    -   `setEditorView` option for compatibility to Codemirror v6
+    -   `supportCodeFolding` optional property to fold code for the supported modes e.g: `xml`, `json`, etc.
+    -   `shouldHighlightActiveLine` optional property to highlight active line where the cursor is currently in.
+    -   `shouldHaveMinimalSetup` optional property that imports codemirror's base minimal configurations.
+    -   `additionalExtensions` optional property for additional extensions to customize the editor further.
+-   `<Markdown />`
+    -   `htmlContentBlockProps` can now be used to configure the wrapper around the Markdown content
+-   `$eccgui-selector-text-spot-highlight` config variable to specify selector that is used to create shortly highlighted spots
+    -   it is highlighted when the selector is also active local anchor target or if it has the `.eccgui-typography--spothighlight` class attached to it
+
+### Fixed
+
+-   toggling on/off the `<HandleTools/>` was corrected, they kept displayed after re-entering with the cursor
+-   `<Pagination/>`
+    -   change text overflow for selectors to `clip` because Firefox rendered `ellipsis` a bit too early
 
 ### Changed
 
@@ -33,9 +74,47 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   upgrade to Storybook v8
     -   include a few patches for actions, see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function
 -   allow `next` and `legacy` as branch names
+-   `<CodeEditor />`
+    -   `setInstance` interface changed to `setEditorView` for semantic compatibility to Codemirror v6
+-   `<BreadcrumbItem/>`
+    -   link color and separation char were adjusted
+-   `<Markdown/>`
+    -   align blocks for language specific code to default code blocks
 -   `<ReactFlow />`
     -   property color for `graph` configuration was adjusted
 -   switch icons for `item-clone` and `item-copy` to Carbon's `<Replicate/>` and `<Copy/>`
+-   Remove duplicated icon names `artefact-customtask*` and only keep `artefact-task*` names.
+-   `<OverviewItemDepiction/>`
+    -   improve examples in storybook
+    -   improve display for images that are to large for the available space (fully show them)
+
+### Deprecated
+
+-   `<Icon/>` and `<TestIcon/>`
+    -   `description` and `iconTitle`: use `title` as replacement.
+-   `TableRowHeightSize` type: use `TableProps["size"]` directly
+-   `IRenderModifiers` interface: use `SuggestFieldItemRendererModifierProps`
+-   `IElementWidth` type: use `SuggestFieldItemRendererModifierProps["styleWidth"]`
+-   `MultiSelectSelectionProps` interface: use `MultiSuggestFieldSelectionProps`
+-   `MultiSelectProps` interface: use `MultiSuggestFieldProps`
+-   `nodeTypes` and `edgeTypes`
+    -   will be removed without replacement, define it yourself or use `<ReactFlow/` with `configuration` option
+-   `AutoCompleteFieldProps` and `IAutoCompleteFieldProps` interfaces: use `SuggestFieldProps`
+-   `<CodeAutocompleteField/>`
+    -   `AutoSuggestionProps`: use `CodeAutocompleteFieldProps` instead
+    -   we renamed `ISuggestionBase`, `ISuggestionWithReplacementInfo`, `IReplacementResult`, `IPartialAutoCompleteResult`, `IValidationResult` to `CodeAutocompleteFieldSuggestionBase`, `CodeAutocompleteFieldSuggestionWithReplacementInfo`, `CodeAutocompleteFieldReplacementResult`, `CodeAutocompleteFieldPartialAutoCompleteResult`, `CodeAutocompleteFieldValidationResult`
+-   all legacy support components are going to be removed, you need to replace them by activily maintained components
+    -   `<ButtonReplacement/>`: switch to `<Button />`
+    -   `<AffirmativeButtonReplacement/>`: switch to `<Button affirmative />`
+    -   `<DismissiveButtonReplacement/>`: switch to `<Button dismissive />`
+    -   `<DisruptiveButtonReplacement/>`: switch to `<Button disruptive />`
+    -   `<CheckboxReplacement/>`: switch to `<Checkbox />`
+    -   `<RadioButtonReplacement/>`: switch to `<RadioButton />`
+    -   `<TabsReplacement/>`: switch to `<Tabs />`
+    -   `<TextFieldReplacement/>`: switch to `<TextField />`, `<TextArea />`, `<FieldItem />`
+-   `MultiSuggestField.ofType` method:
+    -   instead of `MyMultiSuggest = MultiSuggestField.ofType<MyType>()` use directly `<MultiSuggestField<MyType> {...props} />`
+    -   `MultiSuggestField.ofType` also returns the original BlueprintJS `MultiSelect` element, not our version!
 
 ## [23.8.0] - 2024-08-19
 
@@ -84,7 +163,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   Element wraps the content that need to be displayed sticky.
 -   `utils`
     -   `getScrollParent`: method to find the scroll parent of an element
--   `<AutoCompleteField />`
+-   `<SuggestField />`
     -   Support loading more results when scrolling to the end of the result list.
 -   `<TextArea />`
     -   `intent` property to set the state, formerly used `hasStatePrimary`, `hasStateSuccess`, `hasStateWarning` and `hasStateDanger` properties are now deprecated
@@ -219,7 +298,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<ActivityControlWidget />`
     -   added extra line to show timer for execution period
 -   `<ExtendedCodeEditor />`
-    -   replaces `<SingleLineCodeEditor />` to get used for the `<AutoSuggestion />` component
+    -   replaces `<SingleLineCodeEditor />` to get used for the `<CodeAutocompleteField />` component
 -   new icons
     -   `data-string`, `data-url`, `data-date`, `data-time`, `data-datetime`, `data-number`
 
@@ -267,7 +346,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   `loose`: can be set to `true` to prevent the box with border on the label component
 -   `<TableExpandHeader />`
     -   `toggleIcon`: optional icon that should be displayed instead of the default ones.
--   `Utilities`
+-   `utils`
     -   `getGlobalVar` and `setGlobalVar`: can be used to manage global variables indepentently from component states. They are stored to the `window` object under a `eccgui` "namespace". Can be used for example to manage globally increased counters. Do not use them if you need to store user session properties or confidential data!
 -   canonical icons for `artefact-chatlog`, `entity-human`, `entity-robot` and `operation-magic`
 
@@ -397,7 +476,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<WorkspaceHeader />`
     -   `IWorkspaceHeaderProps` interface is now deprecated, use `WorkspaceHeaderProps` instead
 -   `<NumericInput />`
-    -   It will be remove because beside the special arrow buttons it does not add any special. Could be done also with `<TextField />` combined with correct `type`.
+    -   It will be removed because beside the special arrow buttons it does not add any special. Could be done also with `<TextField />` combined with correct `type`.
 -   `<Highlighter />`
     -   `HighlighterFunctions` renamed to `highlighterUtils`
     -   `extractSearchWords` moved to `highlighterUtils.extractSearchWords`
@@ -412,7 +491,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `ReactFlow` extensions
     -   `NodeProps`: renamed to `NodeDefaultProps`
     -   `minimapNodeClassName`: moved to `miniMapUtils.nodeClassName`
-    -   `minimapNodeColor`: moved to `miniMapUtils.nodeClassName`
+    -   `minimapNodeColor`: moved to `miniMapUtils.nodeColor`
     -   `nodeUtils`: renamed to `nodeDefaultUtils`
     -   `IHandleProps`: renamed to `NodeContentHandleProps`
     -   `NodeDimensions`: use `NodeContentProps<any>['nodeDimensions']`

README.md

@@ -109,9 +109,11 @@ If necessary you can use [yalc](https://github.com/wclr/yalc) to develop gui ele
 
 1. Install yalc globally via npm or yarn
 2. Checkout [@eccenca/gui-elements](https://github.com/eccenca/gui-elements)
-3. Inside gui elements folder: `yalc publish --push`
-4. Inside your applications folder: `yalc link @eccenca/gui-elements`
-5. After updates to the gui elements: `yarn build:all && yalc push`
+3. Inside gui elements folder: `yarn build:all && yalc publish --push`
+4. Inside your applications folder: `yalc add @eccenca/gui-elements`
+5. After updates to the gui elements rebuild and update the applications yalc folder: `yarn build:all && yalc publish --push` (you usually are not required to fire another `yalc add` in your applications folder)
+
+After you tested the GUI elements package locally you can Clean up your applications folder by `yalc remove --all && git checkout -- pakage.json yarn.lock`.
 
 ### Process for pull requests and publishing releases
 

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.0",
+    "version": "24.0.0-rc.6",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -70,49 +70,52 @@
         "@blueprintjs/select": "^5.2.2",
         "@carbon/icons": "^11.47.1",
         "@carbon/react": "^1.64.1",
+        "@codemirror/lang-json": "^6.0.1",
+        "@codemirror/lang-markdown": "^6.3.1",
+        "@codemirror/lang-xml": "^6.1.0",
+        "@codemirror/legacy-modes": "^6.4.2",
         "@mavrin/remark-typograf": "^2.2.0",
-        "codemirror": "^5.65.16",
-        "codemirror-formatting": "^1.0.0",
+        "codemirror": "^6.0.1",
         "color": "^4.2.3",
         "compute-scroll-into-view": "^3.1.0",
         "lodash": "^4.17.21",
-        "re-resizable": "6.9.9",
+        "re-resizable": "^6.10.1",
         "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",
         "react-inlinesvg": "^3.0.3",
         "react-markdown": "^8.0.7",
-        "react-syntax-highlighter": "^15.5.0",
+        "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",
         "reset-css": "^5.0.2",
         "unified": "^11.0.5",
-        "wicg-inert": "^3.1.3"
+        "wicg-inert": "^3.1.3",
+        "xml-formatter": "^3.6.3"
     },
     "devDependencies": {
-        "@babel/core": "^7.25.2",
+        "@babel/core": "^7.26.0",
         "@babel/plugin-proposal-class-properties": "^7.16.7",
         "@babel/plugin-proposal-private-methods": "^7.16.11",
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-        "@babel/preset-env": "^7.25.4",
-        "@babel/preset-flow": "^7.24.7",
-        "@babel/preset-react": "^7.24.7",
-        "@babel/preset-typescript": "^7.24.7",
-        "@storybook/addon-actions": "^8.2.9",
-        "@storybook/addon-essentials": "^8.2.9",
-        "@storybook/addon-jest": "^8.2.9",
-        "@storybook/addon-links": "^8.2.9",
+        "@babel/preset-env": "^7.26.0",
+        "@babel/preset-flow": "^7.25.9",
+        "@babel/preset-react": "^7.25.9",
+        "@babel/preset-typescript": "^7.26.0",
+        "@storybook/addon-actions": "^8.4.3",
+        "@storybook/addon-essentials": "^8.4.3",
+        "@storybook/addon-jest": "^8.4.3",
+        "@storybook/addon-links": "^8.4.3",
         "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-        "@storybook/cli": "^8.2.9",
+        "@storybook/cli": "^8.4.3",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^8.2.9",
-        "@storybook/react-webpack5": "^8.2.9",
-        "@storybook/test": "^8.2.9",
-        "@testing-library/jest-dom": "^6.5.0",
+        "@storybook/react": "^8.4.3",
+        "@storybook/react-webpack5": "^8.4.3",
+        "@storybook/test": "^8.4.3",
+        "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^12.1.2",
         "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
@@ -122,7 +125,7 @@
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
         "babel-jest": "^29.7.0",
-        "chromatic": "^11.7.1",
+        "chromatic": "^11.18.1",
         "eslint": "^8.57.0",
         "eslint-plugin-react": "^7.35.0",
         "eslint-plugin-react-hooks": "^4.6.2",
@@ -141,7 +144,7 @@
         "rimraf": "^5.0.10",
         "sass": "1.62.1",
         "sass-loader": "10.3.1",
-        "storybook": "^8.2.9",
+        "storybook": "^8.4.3",
         "stylelint": "^15.11.0",
         "stylelint-config-recess-order": "^4.6.0",
         "stylelint-config-standard-scss": "^9.0.0",
@@ -158,7 +161,9 @@
     },
     "resolutions": {
         "**/@types/react": "^17.0.80",
-        "node-sass-package-importer/**/postcss": "^8.4.41"
+        "node-sass-package-importer/**/postcss": "^8.4.41",
+        "**/cross-spawn": "^7.0.5 ",
+        "**/micromatch": "^4.0.8"
     },
     "husky": {
         "hooks": {

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,15 +32,12 @@ 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"
     | "Not executed"
     | "Running"
     | "Waiting"
     | "Canceling";
-export type SilkActivityStatusConcrete = ConcreteActivityStatus;

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;