Replace deprecated gui components (CMEM-4905)

CHANGELOG.md

@@ -35,6 +35,17 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   `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 />`
+    -   `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.
+
 
 ### Fixed
 
@@ -67,6 +78,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   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
 
@@ -87,11 +100,17 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   `<FlexibleLayoutItem />`
     -   `<GridColumn />`
     -   `<PropertyName />` and `<PropertyValue />`
+-   `<MultiSelect />`
+    -   by default, if no searchPredicate or searchListPredicate is defined, the filtering is done via case-insensitive multi-word filtering.
 
 ### Deprecated
 
 -   `<StringPreviewContentBlobToggler />`
     -   `firstNonEmptyLineOnly` will be removed, is replaced by `useOnly="firstNonEmptyLine"`
+-   `<ContextMenu />`
+    -   `togglerLarge`: replaced by the more versatile `togglerSize` property
+-   `<MultiSelect />`
+    -   `searchPredicate`: replaced by the, in some cases, more efficient `searchListPredicate`
 
 ## [25.0.0] - 2025-12-01
 

src/cmem/ActivityControl/ActivityControlWidget.stories.tsx

@@ -4,14 +4,9 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import {
-    ActivityControlWidget,
-    ActivityControlWidgetAction,
-    IconButton,
-    SimpleDialog,
-    Tag,
-    TagList,
-} from "../../../index";
+import { IconButton, SimpleDialog, Tag, TagList } from "../../components";
+
+import { ActivityControlWidget, ActivityControlWidgetAction } from "./ActivityControlWidget";
 
 export default {
     title: "Cmem/ActivityControlWidget",

src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -1,12 +1,5 @@
 import React from "react";
 
-import {ValidIconName} from "../../components/Icon/canonicalIconNames";
-import {IconProps} from "../../components/Icon/Icon";
-import {TestIconProps} from "../../components/Icon/TestIcon";
-import {TestableComponent} from "../../components/interfaces";
-import {ProgressBarProps} from "../../components/ProgressBar/ProgressBar";
-import {SpinnerProps} from "../../components/Spinner/Spinner";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 import {
     Card,
     ContextMenu,
@@ -24,7 +17,14 @@ import {
     ProgressBar,
     Spinner,
     Tooltip,
-} from "../../index";
+} from "../../components";
+import { ValidIconName } from "../../components/Icon/canonicalIconNames";
+import { IconProps } from "../../components/Icon/Icon";
+import { TestIconProps } from "../../components/Icon/TestIcon";
+import { TestableComponent } from "../../components/interfaces";
+import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar";
+import { SpinnerProps } from "../../components/Spinner/Spinner";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ActivityControlWidgetProps extends TestableComponent {
     /**

src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx

@@ -1,6 +1,8 @@
-import React, { useState } from "react";
-
-import { Button, HtmlContentBlock, IconButton, SimpleDialog } from "../../index";
+import React, {useState} from "react";
+import SimpleDialog from "../../components/Dialog/SimpleDialog";
+import IconButton from "../../components/Icon/IconButton";
+import Button from "../../components/Button/Button";
+import HtmlContentBlock from "../../components/Typography/HtmlContentBlock";
 
 interface ActivityExecutionErrorReportModalProps {
     // Title of the modal

src/cmem/ContentBlobToggler/ContentBlobToggler.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 
-import { Link, Spacing } from "../../index";
+import Link from "../../components/Link/Link";
+import Spacing from "../../components/Separation/Spacing";
+import InlineText from "../../components/Typography/InlineText";
 
 export interface ContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -31,6 +33,10 @@ export interface ContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivEle
         Callback if toggler is necessary. Default: true
     */
     enableToggler?: boolean;
+    /**
+     * Force always inline rendering.
+     */
+    forceInline?: boolean;
 }
 
 /** Shows a preview with the option to expand to a full view (and back). */
@@ -42,27 +48,29 @@ export function ContentBlobToggler({
     fullviewContent,
     startExtended = false,
     enableToggler = true,
+    forceInline = false,
     ...otherProps
 }: ContentBlobTogglerProps) {
     const [isExtended, setViewState] = useState(startExtended);
-    const handlerToggleView = (event: any) => {
+    const handlerToggleView = (event: React.MouseEvent<HTMLAnchorElement>) => {
         event.preventDefault();
         event.stopPropagation();
         setViewState(!isExtended);
     };
 
-    return (
+    const tooglerDisplay = (
         <div className={className} {...otherProps}>
             {!isExtended ? (
                 <>
                     {previewContent}
                     {enableToggler && (
                         <>
-                            {" "}&hellip;{" "}
+                            {" "}
+                            &hellip;{" "}
                             <Link
                                 href="#more"
                                 data-test-id={"content-blob-toggler-more-link"}
-                                onClick={(e: any) => {
+                                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
                                     handlerToggleView(e);
                                 }}
                             >
@@ -76,11 +84,11 @@ export function ContentBlobToggler({
                     {fullviewContent}
                     {enableToggler && (
                         <div>
-                            <Spacing size="small" />
+                            {forceInline ? <> </> : <Spacing size="small" />}
                             <Link
                                 data-test-id={"content-blob-toggler-less-link"}
                                 href="#less"
-                                onClick={(e: any) => {
+                                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
                                     handlerToggleView(e);
                                 }}
                             >
@@ -92,4 +100,6 @@ export function ContentBlobToggler({
             )}
         </div>
     );
+
+    return forceInline ? <InlineText>{tooglerDisplay}</InlineText> : tooglerDisplay;
 }

src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -1,6 +1,9 @@
 import React from "react";
+import {ContentBlobToggler, ContentBlobTogglerProps} from "./ContentBlobToggler";
+import {Markdown} from "../markdown/Markdown";
+import {utils} from "../../common";
+import InlineText from "../../components/Typography/InlineText";
 
-import { ContentBlobToggler, ContentBlobTogglerProps, InlineText, Markdown, utils } from "./../../index";
 
 export interface StringPreviewContentBlobTogglerProps
     extends Omit<ContentBlobTogglerProps, "previewContent" | "enableToggler"> {
@@ -54,6 +57,7 @@ export function StringPreviewContentBlobToggler({
     allowedHtmlElementsInPreview,
     noTogglerContentSuffix,
     firstNonEmptyLineOnly,
+    ...otherContentBlobTogglerProps
 }: StringPreviewContentBlobTogglerProps) {
     // need to test `firstNonEmptyLineOnly` until property is removed
     const useOnlyTest: StringPreviewContentBlobTogglerProps["useOnly"] = firstNonEmptyLineOnly
@@ -105,6 +109,7 @@ export function StringPreviewContentBlobToggler({
             fullviewContent={fullviewContent}
             startExtended={startExtended}
             enableToggler={enableToggler}
+            {...otherContentBlobTogglerProps}
         />
     );
 }

src/cmem/markdown/Markdown.tsx

@@ -8,8 +8,9 @@ import { remarkDefinitionList } from "remark-definition-list";
 import remarkGfm from "remark-gfm";
 import { PluggableList } from "unified";
 
+import { TestableComponent } from "../../components";
+import { HtmlContentBlock, HtmlContentBlockProps } from "../../components/Typography";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { HtmlContentBlock, HtmlContentBlockProps, TestableComponent } from "../../index";
 
 export interface MarkdownProps extends TestableComponent {
     children: string;

src/components/Accordion/Stories/AccordionItem.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Accordion, AccordionItem, HtmlContentBlock } from "../../../../index";
+import { Accordion, AccordionItem, HtmlContentBlock } from "../../../components";
 
 export default {
     title: "Components/Accordion/AccordionItem",

src/components/Application/_header.scss

@@ -52,19 +52,22 @@ $shell-header-icon-03: $eccgui-color-applicationheader-text !default;
 /// Item link
 $shell-header-link: $blue-60 !default;
 
+/// Height
+$shell-header-height: mini-units(8) !default;
+
 // load library sub component
 @import "~@carbon/react/scss/components/ui-shell/header/index";
 
 // tweak original layout
 
 .#{$prefix}--header {
-    height: mini-units(8);
+    height: $shell-header-height;
 }
 
 .#{$prefix}--header__action,
 .#{$prefix}--header__action.#{$prefix}--btn--icon-only {
-    width: mini-units(8);
-    height: mini-units(8);
+    width: $shell-header-height;
+    height: $shell-header-height;
     padding-block-start: 0;
     background-color: transparent;
 
@@ -128,7 +131,7 @@ span.#{$prefix}--header__name {
 }
 
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item {
-    height: mini-units(8);
+    height: $shell-header-height;
 }
 
 // tweak original colors (as long as config does not work properly)
@@ -267,15 +270,15 @@ a.#{$prefix}--header__menu-item:focus > svg {
     // adjust position of all other modal dialogs
 
     .#{$ns}-dialog-container {
-        top: mini-units(8);
-        left: mini-units(8);
-        width: calc(100% - #{mini-units(8)});
-        min-height: calc(100% - #{mini-units(8)});
+        top: $shell-header-height;
+        left: $shell-header-height;
+        width: calc(100% - #{$shell-header-height});
+        min-height: calc(100% - #{$shell-header-height});
     }
 
     .#{$eccgui}-dialog__wrapper {
-        max-width: calc(100vw - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace});
-        max-height: calc(100vh - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace});
+        max-width: calc(100vw - #{$shell-header-height} - #{2 * $eccgui-size-block-whitespace});
+        max-height: calc(100vh - #{$shell-header-height} - #{2 * $eccgui-size-block-whitespace});
         margin: 0;
     }
 }

src/components/Badge/Badge.stories.tsx

@@ -3,7 +3,7 @@ import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import { Badge, Icon, TestIcon } from "../../../index";
+import { Badge, Icon, TestIcon } from "../../components";
 
 export default {
     title: "Components/Badge",

src/components/Button/Button.tsx

@@ -104,13 +104,18 @@ export const Button = ({
 
     const ButtonType = restProps.href ? BlueprintAnchorButton : BlueprintButton;
 
+    const iconSize = {
+        small: restProps["size"] === "small",
+        large: restProps["size"] === "large",
+    };
+
     const button = (
         <ButtonType
             {...restProps}
             className={`${eccgui}-button ` + className}
             intent={(intent || intentByFunction) as BlueprintIntent}
-            icon={typeof icon === "string" ? <Icon name={icon} /> : icon}
-            rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} /> : rightIcon}
+            icon={typeof icon === "string" ? <Icon name={icon} {...iconSize} /> : icon}
+            rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} {...iconSize} /> : rightIcon}
         >
             {children}
             {typeof badge !== "undefined" && (

src/components/Card/stories/Card.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
-import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle, Divider } from "../../../../index";
+import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle, Divider } from "../../../components";
 
 import { Default as CardActionsExample } from "./CardActions.stories";
 import { Default as CardContentExample } from "./CardContent.stories";

src/components/Checkbox/Stories/Checkbox.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Checkbox, HtmlContentBlock } from "../../../../index";
+import { Checkbox, HtmlContentBlock } from "../../../components";
 
 export default {
     title: "Forms/Checkbox",

src/components/ContentGroup/ContentGroup.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Badge, ContentGroup, HtmlContentBlock, IconButton, Tag } from "../../../index";
+import { Badge, ContentGroup, HtmlContentBlock, IconButton, Tag } from "../../components";
 
 export default {
     title: "Components/ContentGroup",

src/components/ContentGroup/ContentGroup.tsx

@@ -2,8 +2,6 @@ import React from "react";
 import classNames from "classnames";
 import Color from "color";
 
-import { TestableComponent } from "../../components/interfaces";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {
     Divider,
     Icon,
@@ -17,7 +15,9 @@ import {
     Toolbar,
     ToolbarSection,
     Tooltip,
-} from "../index";
+} from "../../components";
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ContentGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, TestableComponent {
     /**