Release new major version: v24.0.0

.github/dependabot.yml

@@ -0,0 +1,23 @@
+version: 2
+updates:
+  # Maintain dependencies for GitHub Actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+    open-pull-requests-limit: 1 # set 0 to temporarily disable automatic update requests
+    pull-request-branch-name:
+      separator: "/"
+    assignees:
+      - "haschek"
+  # Maintain dependencies for npm
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+    versioning-strategy: increase
+    open-pull-requests-limit: 3 # set 0 to temporarily disable automatic update requests
+    pull-request-branch-name:
+      separator: "/"
+    assignees:
+      - "haschek"

.github/workflows/deployment-storybook.yml

@@ -19,19 +19,20 @@ on:
 jobs:
   chromatic-deployment:
     runs-on: ubuntu-latest
+    if: ${{ github.actor != 'dependabot[bot]' }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@main
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@main
         with:
-          node-version: "16"
+          node-version: "18"
       - name: Install dependencies
         run: yarn install
       - name: Create jest results
         run: yarn test:generate-output
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@v11
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/release-branch.yml

@@ -4,7 +4,6 @@ on:
   workflow_dispatch:
     branches:
       - "develop"
-      - "feature/prepareReleaseForDM-CMEM-4151" # TODO: only for testing, remove it later
     inputs:
       releasetype:
         description: "Type of release"
@@ -20,10 +19,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@main
+      - uses: actions/setup-node@main
         with:
-          node-version: "16"
+          node-version: "18"
       - name: Update package.json with new release candidate version
         id: create-version
         run: |

.github/workflows/release-candidate.yml

@@ -30,15 +30,15 @@ jobs:
               echo "You started it on '${{ steps.branch-name.outputs.current_branch }}'."
               exit 1
           fi
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@main
       - name: Initialize mandatory git config
         # @see https://github.community/t/how-do-i-get-gh-username-based-on-actions-events/17882
         run: |
           git config user.name "${{ github.actor }}"
           git config user.email "${{ github.actor }}@users.noreply.github.com"
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@main
         with:
-          node-version: "16"
+          node-version: "18"
       - name: Get version
         id: package-version
         run: echo "version=$(node -p -e "require('./package.json').version")" >> $GITHUB_OUTPUT

.github/workflows/release-final.yml

@@ -13,15 +13,15 @@ jobs:
       sha: ${{ steps.tag-revision.outputs.sha }}
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@main
       - name: Initialize mandatory git config
         # @see https://github.community/t/how-do-i-get-gh-username-based-on-actions-events/17882
         run: |
           git config user.name "${{ github.actor }}"
           git config user.email "${{ github.actor }}@users.noreply.github.com"
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@main
         with:
-          node-version: "16"
+          node-version: "18"
       - name: Get version
         id: package-version
         run: echo "version=$(node -p -e "require('./package.json').version.split('-').shift()")" >> $GITHUB_OUTPUT
@@ -44,7 +44,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: create-release-version
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@main
         with:
           ref: develop
       - name: Initialize mandatory git config

.github/workflows/release-publish.yml

@@ -26,13 +26,13 @@ jobs:
           echo ${{ inputs.ref }}
           echo ${{ inputs.sha }}
           echo ${{ inputs.sectionChangelog }}
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@main
         with:
           fetch-depth: 0
           ref: ${{ inputs.ref }}
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@main
         with:
-          node-version: "16"
+          node-version: "18"
           registry-url: "https://registry.npmjs.org"
       - name: Set name vars
         id: info-vars
@@ -56,7 +56,7 @@ jobs:
         # @see https://github.com/chromaui/chromatic-cli/issues/551
         if: inputs.sectionChangelog != 'Unreleased'
         id: chromatic-upload
-        uses: chromaui/action@v1
+        uses: chromaui/action@v11
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.chromaticToken }}

.github/workflows/test-code.yml

@@ -15,11 +15,11 @@ jobs:
   test-code:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@main
       - name: Test using Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@main
         with:
-          node-version: "16"
+          node-version: "18"
       - run: yarn install
       - run: yarn compile
       - run: yarn compile-scss

.github/workflows/test-project.yml

@@ -5,29 +5,29 @@ on:
     branches-ignore:
       - "develop"
       - "main"
+      - "next"
+      - "legacy"
   pull_request:
 
 jobs:
   test-branch-name:
     runs-on: ubuntu-latest
     steps:
       - name: Test branch name
-        # https://github.com/marketplace/actions/branch-name-rules
-        uses: deepakputhraya/action-branch-name@master
+        # https://github.com/marketplace/actions/enforce-branch-name
+        uses: finleyfamily/action-enforce-branch-name@master
         with:
           regex: '([a-z])+\/([a-z]).([aA-zZ\.\-\d])+'
-          allowed_prefixes: "feature,release,fix,bugfix,hotfix,change,temp"
-          ignore: "main,develop"
-          min_length: 10
-          max_length: 100
+          allowed_prefixes: "feature,release,fix,bugfix,hotfix,change,temp,dependabot"
+          exclude: "main,develop,next,legacy"
   test-documentation:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@main
       - name: Test existence of important files
         # https://github.com/marketplace/actions/file-existence
         id: check_files
-        uses: andstor/file-existence-action@v2
+        uses: andstor/file-existence-action@main
         with:
           files: "package.json, LICENSE, README.md, CHANGELOG.md"
       - name: 'Test for "## [Unreleased]" section in changelog'

.storybook/main.js

@@ -15,6 +15,7 @@ module.exports = {
                 },
             },
         },
+        "@storybook/addon-webpack5-compiler-babel",
     ],
     framework: {
         name: "@storybook/react-webpack5",

CHANGELOG.md

@@ -6,6 +6,118 @@ 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)
+-   `<PropertyValueList />` and `<PropertyValuePair />`
+    -   `singleColumn` property to display label and value below each other
+-   `<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` SCSS 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
+-   `<ApplicationContainer />`:
+    -   `useDropzoneMonitor` helper hook process was improved so that less events are processed and the dropzone monitoring is more stable
+
+### Changed
+
+-   GUI elements library needs node 18 or an higher version because dependencies were upgraded
+    -   you may run into problems if you try it with Node v16 or v17, or Webpack v4, mainly because of a Node bugfix regarding the OpenSSL provider
+    -   if you cannot upgrade your dependencies then you could workaround that by patching the `crypto` package or using Node with `--openssl-legacy-provider` option
+    -   see https://github.com/webpack/webpack/issues/14532 and https://stackoverflow.com/questions/69692842/ for more info and possible solutions
+-   upgrade to `@carbon/react` package
+    -   almost all Carbon related packages were replaced by using only `@carbon/react`
+    -   some component interfaces partly lack documentation in our Storybook because their base interfaces from `@carbon/react` are currently not exported: `AccordionItemProps`, `ApplicationHeaderProps`, `ApplicationToolbarProps`, `ApplicationToolbarActionProps`, `ApplicationToolbarPanelProps`, `CarbonIconType`, `TableCellProps`, `TableExpandRowProps`, `TableProps`
+-   upgrade to Typescript v5
+    -   your package should be compatible to Typescript 5 patterns
+-   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
+-   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)
+-   `<CodeAutocompleteField />`:
+    -   Add parameter `reInitOnInitialValueChange`, to allow the field to re-initialize if the initial value changes.
+
+### 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
 
 ### Added
@@ -53,7 +165,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
@@ -188,7 +300,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`
 
@@ -236,7 +348,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`
 
@@ -366,7 +478,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`
@@ -381,7 +493,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']`