Release v26.2.0 into main branch

.nvmrc

@@ -0,0 +1 @@
+lts/krypton

.storybook/main.js

@@ -1,5 +1,5 @@
-const sass = require("sass");
 const path = require("path");
+const sass = require("sass");
 const sassRenderSyncConfig = require("./../scripts/sassConfig");
 const { silenceDeprecations } = require("../scripts/sassDeprecationConfig");
 
@@ -9,15 +9,6 @@ module.exports = {
         "@storybook/addon-links",
         "@storybook/addon-docs",
         "@storybook/addon-a11y",
-        {
-            name: "@storybook/preset-scss",
-            options: {
-                sassLoaderOptions: {
-                    implementation: sass,
-                    sassOptions: {...sassRenderSyncConfig, silenceDeprecations},
-                },
-            },
-        },
         "@storybook/addon-webpack5-compiler-babel",
     ],
     framework: {
@@ -64,6 +55,16 @@ module.exports = {
         },
     },
     webpackFinal: async (config, { configType }) => {
+        // never let the compiled package output take part in the Storybook build,
+        // stories always have to use the sources
+        // a directory import like `"./../../../../"` is resolved by the `exports` field of our
+        // own package.json and would silently pull `dist/esm/` into the preview bundle,
+        // this restriction removes it from the candidates so that the root `index.ts` is used
+        const distPath = path.resolve(__dirname, "..", "dist");
+        config.resolve.restrictions = [
+            ...(config.resolve.restrictions ?? []),
+            new RegExp(`^(?!${distPath.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}[/\\\\])`),
+        ];
         // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
         if (configType === "PRODUCTION") {
             // remove source maps from production storybook
@@ -72,13 +73,29 @@ module.exports = {
             config.devtool = false;
         }
         config.module.rules = [
+            {
+                test: /\.s[ac]ss$/i,
+                use: [
+                    require.resolve("style-loader"),
+                    {
+                        loader: require.resolve("css-loader"),
+                        options: {
+                            importLoaders: 1,
+                        },
+                    },
+                    {
+                        loader: require.resolve("sass-loader"),
+                        options: {
+                            implementation: sass,
+                            sassOptions: { ...sassRenderSyncConfig, silenceDeprecations },
+                        },
+                    },
+                ],
+            },
             {
                 test: /\.(png|jpg|gif|svg)(\\?.*)?$/,
                 include: /\.tobase64\./,
-                loader: "url-loader",
-                options: {
-                    limit: true,
-                },
+                type: "asset/inline",
             },
             ...config.module.rules.map((rule) => {
                 if (
@@ -92,11 +109,6 @@ module.exports = {
                 return rule;
             }),
         ];
-        config.resolve.alias = {
-            ...config.resolve.alias,
-            // Fix nasty bug with importing from this package, Storybook webpack cannot resolve it otherwise
-            "@codemirror/legacy-modes": path.resolve(__dirname, "../node_modules/@codemirror/legacy-modes"),
-        };
         return config;
     },
 };

.storybook/preview.js

@@ -17,7 +17,7 @@ export const parameters = {
 const preview = {
     // Enables auto-generated documentation for all stories
     // @see https://storybook.js.org/docs/writing-docs/autodocs
-    tags: ['autodocs'],
+    tags: ["autodocs"],
     parameters,
 };
 

CHANGELOG.md

@@ -8,6 +8,103 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Added
 
+- `<CodeEditor />`
+    - documents the built-in Escape then Tab sequence for moving focus out of the editor when Tab is configured to indent
+    - shows a compact keyboard navigation hint in a bottom CodeMirror panel when Tab is configured to indent
+    - `keyboardHint` accepts a custom string or element for localized instructions, the default instruction is marked as English
+- `<Switch />`
+    - `noDrag` parameter: Add the `nodrag` class to the Switch element. Default: `true`
+- `<Markdown />`
+    - Added `cutOff` property to set maximum number of raw Markdown characters to render
+- `<Label />`
+    - `hidden` property: label is not displayed but stays accessible for screen readers and keyboard navigation
+- `<FieldItem />`
+    - label, input element, helper text and message are connected to each other automatically now
+        - each part without an own `id` gets one based on a unique ID of the field item
+        - the label refers to the input element via `for`, or via `aria-labelledby` on the input element if the label is not displayed as `label` element
+            - an already set `for` is only kept if it refers to the ID of the input element of the field item
+        - helper text and message are referred by the input element via `aria-describedby`
+        - `input`, `textarea`, `select`, the toggle button of `<Select />` and the editable area of `<CodeEditor />` are supported as input element
+            - input elements that cannot be referenced by `for`, e.g. the editable area of the code editor, are connected via `aria-labelledby`
+            - parts that are created after the field item was mounted, e.g. by the code editor, are connected as soon as they exist
+        - already set `id` values and connections are never overwritten
+        - ID references created by the field item are removed again if their part is removed from the field item
+        - `preventAriaAttribution` property: prevents this automatic connection of the field item parts
+- `<Modal />`
+    - `role`, `aria-label`, `aria-labelledby` and `aria-describedby` properties: they are set on the dialog element inside the modal overlay
+        - `role` is `dialog` by default, but it is removed again if neither a label nor a description is available; a console warning points this out when the modal is opened
+    - `aria-modal` is set together with the `role`, so it is left out as well if the `role` was removed
+        - it is `true` for the modal that was opened last according to the `ModalContext`, otherwise it is `false`
+        - if no `ModalContext` is provided, then the modals cannot know about each other, so each of them claims modality
+- `<SimpleDialog />`
+    - `role` and the aria attributes are set automatically now if they are not given
+    - `role` is `alertdialog` if an `intent` state is set that describes an alert (`success`, `warning`, `danger` or `info`), otherwise it is `dialog`
+        - for those alert intent states the content area gets an `id` and is referred by the dialog via `aria-describedby`
+    - explicitly given values are never overwritten
+    - if neither `title`, `aria-label` nor `aria-labelledby` is given for an alert, then the `intent` level is used as fallback for `aria-label`, so the alert dialog always has an accessible name
+- new `utils` methods:
+    - `truncateMarkdownDisplay`: helper function to iterate over `Markdown` renderings to improve the experienced `cutOff` value
+- new icons:
+    - `toggler-treenode-closed`
+    - `toggler-treenode-expanded`
+
+### Changed
+
+- Upgrading base libraries
+    - Carbon, Codemirror, React-Flow
+- minimum node version (`engines.node`) is `18.19.0` now
+    - the build of the ESM distribution needs a synchronous `import.meta.resolve`, which is only available since this version
+- `<FieldItem />`
+    - the used `Label` element gets the `eccgui-fielditem__label` class now
+- `<AlertDialog />`
+    - always uses `role="alertdialog"` now
+    - the `role` property is not accepted anymore
+- `ModalContext`
+    - a change of the stack of open modals re-renders the consumers of the context now, this way modals can react on modals that are opened on top of them, e.g. to hand over `aria-modal`
+        - before only an internal reference was updated, which never triggered any re-render
+        - the component that provides the context via `useModalContext` is re-rendered on every change of the stack, but not if a change does not affect it, e.g. when a modal is closed that was never registered as open
+        - `openModalStack()` still returns the current stack synchronously, also directly after `setModalOpen()` was called
+- `<CodeEditor />`
+    - `enableTab` overrides the Tab behaviour derived from `mode` and `tabIntentStyle` now, if it is set
+        - `enableTab={false}` lets Tab always move the focus, even for modes with tab indentation
+        - if it is not set, Tab is still handled as indentation for modes with `tabIntentStyle="tab"`
+- `<AutoSuggestion />`
+    - Tab is only handled in the editor if `useTabForCompletions` is enabled, as side effect it currently also enables tab indentation
+- `<StringPreviewContentBlobToggler />`
+    - `allowedHtmlElementsInPreview` option is set to inline elements on default
+    - uses now the `Markdown.cutOff` property
+        - this enables Markdown rendering even if the preview need to be shortened
+        - this may lead to slightly different preview lengths
+
+### Fixed
+
+- `<PropertyValuePair />`
+    - fix description and story to point out that `PropertyValueList` need always to be used as wrapper
+- `<ApplicationViewability />`
+    - `show={"print"}` and `hide={"screen"}` content is still accessible by screen readers
+- `<Label />`
+    - `tooltip` content is accessible via keyboard navigation
+- `<Card />`
+    - fix color of first action button in info card
+- BOM issue on compressed stylesheet
+    - first rule `selector` becomes `BOM:selector` that is valid but will never apply
+    - we fixed this problem by adding a dummy rule as first rule
+- ESM distribution
+    - the imports of the `@codemirror/legacy-modes` modes were written with an additional `.js` suffix, but the `exports` map of this package only provides the extension-less sub paths, so they were expanded to unresolvable paths like `mode/jinja2.js.js`
+- Storybook
+    - the `<Tab />` story imported the package root directory, this way the `exports` field of our own `package.json` pulled the built `dist/esm/` output into the preview bundle instead of the sources, and the Storybook build failed as soon as `dist/` existed
+    - the webpack configuration excludes `dist/` from module resolution now, so the sources are always used even if a story references the package root
+- Added explicitly `assert` dependency
+    - the linter of `<CodeEditor />` uses `jshint`, which imports `console-browserify`, and this package requires the node core modules `assert` and `util` without declaring them; bundlers based on webpack 5 do not provide shims for node core modules anymore, so the polyfill (and `util` together with it) is part of the delivery now
+
+### Deprecated
+
+- `preventReactFlowActionsClasses`: use `ClassNames.ReactFlow.preventAllActions`
+
+## [26.1.0] - 2026-08-20
+
+### Added
+
 - `utils`
     - `useComputedStyleFallback` option for `CssCustomProperties`: if the CSSOM does not provide any property name for the used selector, e.g. because the declarations are part of a constructed and adopted stylesheet, then the names are read from the computed style of the matching element; disabled by default because the computed style also contains all inherited custom properties
 

babel.config.json

@@ -1,8 +1,3 @@
 {
-    "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript", "@babel/preset-flow"],
-    "plugins": [
-        ["@babel/plugin-transform-private-methods", { "loose": true }],
-        ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
-        ["@babel/plugin-transform-class-properties", { "loose": true }]
-    ]
+    "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
 }