Merge branch 'change/upgradedToReact18-CMEM-6639' into feature/replaceDeprecatedGuiComponents-CMEM-4905

# Conflicts:
#	CHANGELOG.md
#	src/cmem/ActivityControl/ActivityControlWidget.tsx
#	src/components/MultiSelect/MultiSelect.tsx

Author: andreas-schultz

.storybook/preview.js

@@ -19,7 +19,14 @@ export const decorators = [
 ];
 
 export const parameters = {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    options: {
+        storySort: {
+            order: ["Configuration", "Components", "Forms", "Extensions", "CMEM", "*"],
+        },
+    },
+    actions: {
+        argTypesRegex: "^on[A-Z].*",
+    },
     controls: {
         matchers: {
             color: /(background|color)$/i,

.typescript/tsbuild-esm.json

@@ -1,7 +1,7 @@
 {
     "extends": "./../tsconfig.json",
     "compilerOptions": {
-        "lib": ["dom", "dom.iterable", "es2015", "es2020", "es2021", "es2015.collection", "es2015.iterable"],
+        "lib": ["dom", "dom.iterable", "es2015", "es2020", "es2021", "es2022.intl", "es2015.collection", "es2015.iterable"],
         "module": "es2015",
         "target": "es5",
         "noEmit": false,

CHANGELOG.md

@@ -8,14 +8,35 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Added
 
+-   `<ActivityControlWidget />`
+    -   Add parameter `active` to activity control action to set the `active` state of its button.
+    -   action now can have a `active` and `notification` property
 -   `<ApplicationViewability />`
     -   component for hiding elements in specific media
 -   `<InlineText />`
     -   force children to get displayed as inline content
--   `<NotAvailable />`
-    -   simple placeholder element that can be used to display info about missing data
+-   `<DecoupledOverlay />`
+    -   similar to `ContextOverlay` component but not directly linked to a React element, it specifies the target in the DOM to get connected lazy
 -   `<StringPreviewContentBlobToggler />`
     -   `useOnly` property: specify if only parts of the content should be used for the shortened preview, this property replaces `firstNonEmptyLineOnly`
+-   `<ContextOverlay />`
+    -   `paddingSize` property to add easily some white space
+-   `<CodeEditor />`
+    -   toolbar in `markdown` mode provides a user config menu for the editor appearance
+-   `<RadioButton />`
+    -   `hideIndicator` property: hide the radio inout indicator but click on children can be processed via `onChange` event
+-   `<ColorField />`
+    -   input component for colors
+    -   uses a subset from the configured color palette by default, but it also allows to enter custom colors
+-   CSS custom properties
+    -   beside the color palette we now mirror the most important layout configuration variables as CSS custom properties
+-   new icons:
+    -   `state-confirmed-all`
+    -   `state-declined-all`
+-   `<MultiSuggestField />`
+    -   `MultiSuggestFieldSelectionProps` provides `newlyRemoved` for callbacks set when removing a selected item
+-   `<NotAvailable />`
+    -   simple placeholder element that can be used to display info about missing data
 -   `<ContentBlobToggler />`
     -   `forceInline` property: force inline rendering
 -   `<ContextMenu />`
@@ -25,20 +46,50 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   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.
 
+
 ### Fixed
 
 -   `<Tag />`
     -   create more whitespace inside `small` tag
     -   reduce visual impact of border
 -   `<StringPreviewContentBlobToggler />`
     -   take Markdown rendering into account before testing the maximum preview length
+-   `<CodeEditor />`
+    -   fix `disabled` property update
+-   `<VisualTour />`
+    -   fix color of buttons to move to previous/next step
+    -   take Markdown rendering into account before testing the maximum preview length
 -   `<NodeContent />`
     -   header-menu items are vertically centered now
+-   `<Link />`
+    -   stabilize font size for on hover state
+    -   use correct font sizes when `size` property is set
+-   `Typography`
+    -   adjust displaying fallback symbols in different browsers
+-   `<CodeMirror />`
+    -   use the latest provided `onChange` function
+-   `<TextField />`, `<TextArea />`
+    -   fix emoji false-positives in invisible character detection
+-   `<MultiSuggestField />`
+    -   `onSelection` now sets `newlySelected` only for add actions and no longer sets it to the last element
+    -   border of the BlueprintJS `Tag` elements were fixed
+-   `<Button />`
+    -   badge is correctly displayed when `badge={0}`
+-   Focus outlines
+    -   we use again bold focus outlines for input elements
+    -   they are also used for clickable elements that are focused via keyboard (tab navigation)
 -   `<MultiSelect />`:
     -   border of the BlueprintJS `Tag` elements were fixed
 
 ### Changed
 
+-   `<MultiSelect />`:
+    -   Change default filter predicate to match multi-word queries.
+-   `<EdgeDefault />`
+    -   reduce stroke width to only 1px
+-   `<CodeMirror />`
+    -   `wrapLines` and `preventLineNumber` do not use `false` default value but if not set then it will be interpreted as `false`
+    -   in this way it can be overwritten by new user config for the markdown mode
 -   automatically hide user interaction elements in print view
     -   all application header components except `<WorkspaceHeader />`
     -   `<CardActions />` and `<CardOptions />`
@@ -59,7 +110,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<ContextMenu />`
     -   `togglerLarge`: replaced by the more versatile `togglerSize` property
 -   `<MultiSelect />`
-    -   `searchPreficate`: replaced by the, in some cases, more efficient `searchListPredicate`
+    -   `searchPredicate`: replaced by the, in some cases, more efficient `searchListPredicate`
 
 ## [25.0.0] - 2025-12-01
 

src/_shame.scss

@@ -1,31 +1,13 @@
 // Add stuff to test fast and dirty.
 // This file should not contain any styles.
 
-.#{$prefix}--assistive-text,
-.#{$prefix}--visually-hidden {
-    /*
-        TODO: move to better place, originally from ~@carbon/styles/scss/css--helpers
-        but we cannot use it directly because of other included rules there.
-    */
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    visibility: inherit;
-    border: 0;
-}
-
 /*
     WORKAROUND: thinner scrollbars
 */
 
 * {
-    scrollbar-width: thin;
     scrollbar-color: #bbb transparent;
+    scrollbar-width: thin;
 
     &::-webkit-scrollbar {
         width: 0.25rem;
@@ -38,19 +20,3 @@
         border-radius: 0.125rem;
     }
 }
-
-/*
-    CHANGE: default focus behaviour
-*/
-
-:focus,
-input:focus-visible,
-textarea:focus-visible {
-    outline: none;
-    outline-offset: 0;
-}
-
-:focus-visible {
-    outline: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
-    outline-offset: 1px;
-}

src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -3,8 +3,11 @@ import React from "react";
 import {
     Card,
     ContextMenu,
+    DecoupledOverlay,
     IconButton,
     MenuItem,
+    Notification,
+    NotificationProps,
     OverflowText,
     OverviewItem,
     OverviewItemActions,
@@ -97,14 +100,24 @@ interface IActivityContextMenu extends TestableComponent {
 export interface ActivityControlWidgetAction extends TestableComponent {
     // The action that should be triggered
     action: () => void;
-    // The tooltip that should be shown over the action icon
+    // The tooltip that should be shown over the action icon on hover
     tooltip?: string;
     // The icon of the action button
     icon: ValidIconName | React.ReactElement<TestIconProps>;
     // Action is currently disabled (but shown)
     disabled?: boolean;
     // Warning state
     hasStateWarning?: boolean;
+    // Active state
+    active?: boolean
+    /** A notification that is shown in an overlay pointing at the activity action button. */
+    notification?: {
+        message: string
+        onClose: () => void
+        intent?: NotificationProps["intent"]
+        // Timeout in ms before notification is closed. Default: none
+        timeout?: number
+    }
 }
 
 interface IActivityMenuAction extends ActivityControlWidgetAction {
@@ -209,24 +222,11 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                 data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-actions` : undefined}
             >
                 {activityActions &&
-                    activityActions.map((action, idx) => {
-                        return (
-                            <IconButton
-                                key={idx}
-                                data-test-id={action["data-test-id"]}
-                                data-testid={action["data-testid"]}
-                                name={action.icon}
-                                text={action.tooltip}
-                                onClick={action.action}
-                                disabled={action.disabled}
-                                intent={action.hasStateWarning ? "warning" : undefined}
-                                tooltipProps={{
-                                    hoverOpenDelay: 200,
-                                    placement: "bottom",
-                                }}
-                            />
-                        );
-                    })}
+                    activityActions.map((action, idx) => <ActivityActionButton
+                            key={idx}
+                            action={action}
+                        />
+                    )}
                 {additionalActions}
                 {activityContextMenu && activityContextMenu.menuItems.length > 0 && (
                     <ContextMenu
@@ -259,3 +259,44 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
         <div className={classname}>{widget}</div>
     );
 }
+
+interface ActivityActionButtonProps {
+    action: ActivityControlWidgetAction
+}
+
+const ActivityActionButton = ({action}: ActivityActionButtonProps) => {
+    const actionButtonRef = React.useRef(null);
+    const ActionButton = () => (
+        <IconButton
+            data-test-id={action["data-test-id"]}
+            data-testid={action["data-testid"]}
+            name={action.icon}
+            text={action.tooltip}
+            onClick={action.action}
+            disabled={action.disabled}
+            intent={action.hasStateWarning ? "warning" : undefined}
+            tooltipProps={{
+                hoverOpenDelay: 200,
+                placement: "bottom"
+            }}
+            active={action.active}
+        />
+    )
+    return action.notification ?
+        <>
+                                <span ref={actionButtonRef}>
+                                    <ActionButton/>
+                                </span>
+            {actionButtonRef.current && (
+                <DecoupledOverlay targetSelectorOrElement={actionButtonRef.current} paddingSize={"small"}>
+                    <Notification
+                        message={action.notification.message}
+                        intent={action.notification.intent ?? "neutral"}
+                        onDismiss={action.notification.onClose}
+                        timeout={action.notification.timeout}
+                    />
+                </DecoupledOverlay>
+            )}
+        </> :
+        <ActionButton/>
+}

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

@@ -130,7 +130,7 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
                         name={translate("noteLabel")}
                         id={"sticky-note-input"}
                         mode="markdown"
-                        preventLineNumbers
+                        useToolbar
                         onChange={(value) => {
                             refNote.current = value;
                         }}

src/common/index.ts

@@ -3,7 +3,7 @@ import { decode } from "he";
 import { invisibleZeroWidthCharacters } from "./utils/characters";
 import { colorCalculateDistance } from "./utils/colorCalculateDistance";
 import decideContrastColorValue from "./utils/colorDecideContrastvalue";
-import { getEnabledColorsFromPalette, textToColorHash } from "./utils/colorHash";
+import { getEnabledColorPropertiesFromPalette, getEnabledColorsFromPalette, textToColorHash } from "./utils/colorHash";
 import getColorConfiguration from "./utils/getColorConfiguration";
 import { getScrollParent } from "./utils/getScrollParent";
 import { getGlobalVar, setGlobalVar } from "./utils/globalVars";
@@ -22,6 +22,7 @@ export const utils = {
     setGlobalVar,
     getScrollParent,
     getEnabledColorsFromPalette,
+    getEnabledColorPropertiesFromPalette,
     textToColorHash,
     reduceToText,
     decodeHtmlEntities: decode,