@eccenca/gui-elements 24.1.0-rc.4 → 24.1.0-rc.6

package/dist/types/cmem/ActivityControl/ActivityControlWidget.d.ts

@@ -69,7 +69,7 @@ interface IActivityContextMenu extends TestableComponent {
     menuItems: IActivityMenuAction[];
 }
 export interface ActivityControlWidgetAction extends TestableComponent {
-    action: () => any;
+    action: () => void;
     tooltip?: string;
     icon: ValidIconName | React.ReactElement<TestIconProps>;
     disabled?: boolean;

package/dist/types/components/Icon/canonicalIconNames.d.ts

@@ -17,6 +17,8 @@ declare const canonicalIcons: {
     "artefact-commit": icons.CarbonIconType;
     "artefact-task-deleteprojectfiles": icons.CarbonIconType;
     "artefact-task-downloadfile": icons.CarbonIconType;
+    "artefact-task-pivot": icons.CarbonIconType;
+    "artefact-task-unpivot": icons.CarbonIconType;
     "artefact-task-concatenatetofile": icons.CarbonIconType;
     "artefact-dataset-csv": icons.CarbonIconType;
     "artefact-dataset-eccencadataplatform": icons.CarbonIconType;
@@ -81,6 +83,7 @@ declare const canonicalIcons: {
     "item-vertmenu": icons.CarbonIconType;
     "item-viewdetails": icons.CarbonIconType;
     "item-hidedetails": icons.CarbonIconType;
+    "item-image": icons.CarbonIconType;
     "list-sortasc": icons.CarbonIconType;
     "list-sortdesc": icons.CarbonIconType;
     "list-sort": icons.CarbonIconType;
@@ -118,6 +121,13 @@ declare const canonicalIcons: {
     "operation-filterremove": icons.CarbonIconType;
     "operation-filter": icons.CarbonIconType;
     "operation-format-codeblock": icons.CarbonIconType;
+    "operation-format-text-code": icons.CarbonIconType;
+    "operation-format-text-bold": icons.CarbonIconType;
+    "operation-format-text-italic": icons.CarbonIconType;
+    "operation-format-text-strikethrough": icons.CarbonIconType;
+    "operation-format-list-bullet": icons.CarbonIconType;
+    "operation-format-list-checked": icons.CarbonIconType;
+    "operation-format-list-numbered": icons.CarbonIconType;
     "operation-fix": icons.CarbonIconType;
     "operation-link": icons.CarbonIconType;
     "operation-logout": icons.CarbonIconType;

package/dist/types/components/OverviewItem/OverviewItem.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { CardProps } from "../Card/Card";
 export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Displays the element using reduced height and less white space inside.
@@ -8,10 +9,21 @@ export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement>
      * Add a bit white space around the element.
      */
     hasSpacing?: boolean;
+    /**
+     * Uses a `Card` element to wrap the `OverviewItem` inside.
+     * It is always used with `isOnlyLayout` set to `true`.
+     * Should be used together with `hasSpacing`.
+     */
+    hasCardWrapper?: boolean;
+    /**
+     * Forwarding basic `Card` properties to the wrapper element.
+     * Only used if `hasCardWrapper` is set to `true`.
+     */
+    cardProps?: Omit<CardProps, "children" | "isOnlyLayout" | "fullHeight" | "whitespaceAmount" | "compact">;
 }
 /**
  * This element can include all basic information and actions to give an overview about the item.
  * Mainly used in items list or to create basic widgets.
  */
-export declare const OverviewItem: ({ children, className, densityHigh, hasSpacing, ...otherProps }: OverviewItemProps) => React.FunctionComponentElement<any>;
+export declare const OverviewItem: ({ children, className, densityHigh, hasSpacing, hasCardWrapper, cardProps, ...otherProps }: OverviewItemProps) => React.JSX.Element;
 export default OverviewItem;

package/dist/types/components/OverviewItem/OverviewItemList.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListElement> {
     /**
      * Displays the element using reduced height and less white space inside.
+     * @deprecated (v25) use property directly on `OverviewItem` children.
      */
     densityHigh?: boolean;
     /**
@@ -19,8 +20,8 @@ export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListEle
     columns?: 1 | 2;
 }
 /**
- * This element can include all basic information and actions to give an overview about the item.
- * Mainly used in items list or to create basic widgets.
+ * This component is a listing container for multiple `OverviewItem` elements.
+ * It should only contains `OverviewItem` children but it does not check and control that condition.
  */
 export declare const OverviewItemList: ({ children, className, densityHigh, hasDivider, hasSpacing, columns, ...restProps }: OverviewItemListProps) => React.JSX.Element;
 export default OverviewItemList;

package/dist/types/components/TextField/SearchField.d.ts

@@ -19,5 +19,5 @@ export interface SearchFieldProps extends TestableComponent, Omit<TextFieldProps
 /**
  * Special `TextField` element for search term inputs.
  */
-export declare const SearchField: ({ className, emptySearchInputMessage, onClearanceHandler, onClearanceText, leftIcon, ...otherProps }: SearchFieldProps) => React.JSX.Element;
+export declare const SearchField: ({ className, emptySearchInputMessage, onClearanceHandler, onClearanceText, onChange, leftIcon, rightElement, ...otherProps }: SearchFieldProps) => React.JSX.Element;
 export default SearchField;

package/dist/types/components/Typography/OverflowText.d.ts

@@ -1,10 +1,31 @@
 import React from "react";
-export interface OverflowTextProps {
-    ellipsis?: "reverse" | "none";
+import { TestableComponent } from "../../components/interfaces";
+export interface OverflowTextProps extends React.HTMLAttributes<HTMLElement>, TestableComponent {
+    /**
+     * How is ellipsis used to cut text overflows.
+     * Use `reverse`to use the ellipis on text start and display the end of the text.
+     */
+    ellipsis?: "add" | "reverse" | "none";
+    /**
+     * Display component as inline element.
+     */
     inline?: boolean;
+    /**
+     * Using text overflow on all children elements.
+     */
     passDown?: boolean;
+    /**
+     * Additional CSS class name.
+     */
     className?: string;
+    /**
+     * HTML element that is used for the component.
+     */
     useHtmlElement?: "p" | "div" | "span";
+    /**
+     * Used for all other necessary properties.
+     * @deprecated (v25) we will allow only basic HTML element properties and testing IDs
+     */
     [key: string]: any;
 }
 /** Prevents text from overflowing. */

package/dist/types/extensions/codemirror/CodeMirror.d.ts

@@ -119,11 +119,20 @@ export interface CodeEditorProps extends TestableComponent {
      * Disables the editor.
      */
     disabled?: boolean;
+    /**
+     * Add toolbar for mode.
+     * Currently only `markdown` is supported.
+     */
+    useToolbar?: boolean;
+    /**
+     * Get the translation for a specific key
+     */
+    translate?: (key: string) => string | false;
 }
 /**
  * Includes a code editor, currently we use CodeMirror library as base.
  */
 export declare const CodeEditor: {
-    ({ onChange, onSelection, onMouseDown, onFocusChange, onKeyDown, onCursorChange, name, id, mode, preventLineNumbers, defaultValue, readOnly, shouldHaveMinimalSetup, wrapLines, onScroll, setEditorView, supportCodeFolding, shouldHighlightActiveLine, outerDivAttributes, tabIntentSize, tabIntentStyle, placeholder, additionalExtensions, tabForceSpaceForModes, enableTab, height, useLinting, "data-test-id": dataTestId, autoFocus, disabled, intent, ...otherCodeEditorProps }: CodeEditorProps): React.JSX.Element;
+    ({ onChange, onSelection, onMouseDown, onFocusChange, onKeyDown, onCursorChange, name, id, mode, preventLineNumbers, defaultValue, readOnly, shouldHaveMinimalSetup, wrapLines, onScroll, setEditorView, supportCodeFolding, shouldHighlightActiveLine, outerDivAttributes, tabIntentSize, tabIntentStyle, placeholder, additionalExtensions, tabForceSpaceForModes, enableTab, height, useLinting, "data-test-id": dataTestId, autoFocus, disabled, intent, useToolbar, translate, ...otherCodeEditorProps }: CodeEditorProps): React.JSX.Element;
     supportedModes: ("markdown" | "python" | "sparql" | "turtle" | "xml" | "yaml" | "jinja2" | "json" | "ntriples" | "mathematica" | "sql" | "javascript")[];
 };

package/dist/types/extensions/codemirror/toolbars/commands/markdown.command.d.ts

@@ -0,0 +1,55 @@
+import { EditorView } from "codemirror";
+import { ValidIconName } from "../../../../components/Icon/canonicalIconNames";
+declare enum Commands {
+    header1 = "Heading 1",
+    header2 = "Heading 2",
+    header3 = "Heading 3",
+    header4 = "Heading 4",
+    header5 = "Heading 5",
+    header6 = "Heading 6",
+    codeBlock = "Code block",
+    quote = "Block quote",
+    bold = "Bold",
+    italic = "Italic",
+    strike = "StrikeThrough",
+    inlineCode = "Inline code",
+    unorderedList = "Unordered list",
+    orderedList = "Ordered list",
+    todoList = "Todo list",
+    link = "Link",
+    image = "Image"
+}
+export default class MarkdownCommand {
+    private view;
+    static commands: {
+        readonly paragraphs: readonly [Commands.header1, Commands.header2, Commands.header3, Commands.header4, Commands.header5, Commands.header6, Commands.quote, Commands.codeBlock];
+        readonly basic: {
+            title: Commands;
+            icon: ValidIconName;
+        }[];
+        readonly lists: {
+            title: Commands;
+            icon: ValidIconName;
+            moniker: string;
+        }[];
+        readonly attachments: {
+            title: Commands;
+            icon: ValidIconName;
+        }[];
+    };
+    constructor(view: EditorView);
+    /**
+     * Supported list types are ol, ul, todo.
+     * utility helps to determine which at the start of the line
+     */
+    private getListTypeOfLine;
+    private createListDelimiter;
+    private createList;
+    private enforceCursorFocus;
+    private createHeading;
+    private applyFormatting;
+    private applyAttachment;
+    private applyQuoteFormatting;
+    executeCommand: (command: Commands) => true | void;
+}
+export {};

package/dist/types/extensions/codemirror/toolbars/markdown.toolbar.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { EditorView } from "codemirror";
+interface MarkdownToolbarProps {
+    view?: EditorView;
+    togglePreviewStatus: () => void;
+    showPreview: boolean;
+    translate: (key: string) => string | false;
+    disabled?: boolean;
+    readonly?: boolean;
+}
+export declare const MarkdownToolbar: React.FC<MarkdownToolbarProps>;
+export {};

package/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.1.0-rc.4",
+    "version": "24.1.0-rc.6",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -106,27 +106,27 @@
         "xml-formatter": "^3.6.3"
     },
     "devDependencies": {
-        "@babel/core": "^7.26.0",
-        "@babel/plugin-proposal-class-properties": "^7.18.6",
-        "@babel/plugin-proposal-private-methods": "^7.18.6",
-        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-        "@babel/preset-env": "^7.26.0",
+        "@babel/core": "^7.26.10",
+        "@babel/plugin-transform-class-properties": "^7.25.9",
+        "@babel/plugin-transform-private-methods": "^7.25.9",
+        "@babel/plugin-transform-private-property-in-object": "^7.25.9",
+        "@babel/preset-env": "^7.26.9",
         "@babel/preset-flow": "^7.25.9",
         "@babel/preset-react": "^7.26.3",
-        "@babel/preset-typescript": "^7.26.0",
+        "@babel/preset-typescript": "^7.27.0",
         "@eslint/compat": "^1.2.4",
         "@eslint/eslintrc": "^3.2.0",
         "@eslint/js": "^9.17.0",
-        "@storybook/addon-actions": "^8.4.7",
-        "@storybook/addon-essentials": "^8.4.7",
-        "@storybook/addon-jest": "^8.4.7",
-        "@storybook/addon-links": "^8.4.7",
-        "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-        "@storybook/cli": "^8.4.7",
+        "@storybook/addon-actions": "^8.6.9",
+        "@storybook/addon-essentials": "^8.6.9",
+        "@storybook/addon-jest": "^8.6.9",
+        "@storybook/addon-links": "^8.6.9",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
+        "@storybook/cli": "^8.6.9",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^8.4.7",
-        "@storybook/react-webpack5": "^8.4.7",
-        "@storybook/test": "^8.4.7",
+        "@storybook/react": "^8.6.9",
+        "@storybook/react-webpack5": "^8.6.9",
+        "@storybook/test": "^8.6.9",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^12.1.2",
         "@types/codemirror": "^5.60.15",
@@ -139,7 +139,7 @@
         "@typescript-eslint/eslint-plugin": "^8.18.1",
         "@typescript-eslint/parser": "^8.18.1",
         "babel-jest": "^29.7.0",
-        "chromatic": "^11.20.2",
+        "chromatic": "^11.27.0",
         "eslint": "^9.17.0",
         "eslint-plugin-react": "^7.37.2",
         "eslint-plugin-react-hooks": "^5.1.0",
@@ -159,7 +159,7 @@
         "rimraf": "^5.0.10",
         "sass": "1.62.1",
         "sass-loader": "10.3.1",
-        "storybook": "^8.4.7",
+        "storybook": "^8.6.9",
         "stylelint": "^15.11.0",
         "stylelint-config-recess-order": "^4.6.0",
         "stylelint-config-standard-scss": "^9.0.0",
@@ -178,7 +178,9 @@
         "**/@types/react": "^17.0.83",
         "node-sass-package-importer/**/postcss": "^8.4.49",
         "**/cross-spawn": "^7.0.5 ",
-        "**/micromatch": "^4.0.8"
+        "**/micromatch": "^4.0.8",
+        "**/@babel/runtime": "^7.26.10",
+        "**/@babel/helpers": "^7.26.10"
     },
     "husky": {
         "hooks": {

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -92,7 +92,7 @@ interface IActivityContextMenu extends TestableComponent {
 
 export interface ActivityControlWidgetAction extends TestableComponent {
     // The action that should be triggered
-    action: () => any;
+    action: () => void;
     // The tooltip that should be shown over the action icon
     tooltip?: string;
     // The icon of the action button
@@ -147,6 +147,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                 {props.label && (
                     <OverviewItemLine small={small}>
                         {React.cloneElement(labelWrapper, {}, props.label)}
+                        {timerExecutionMsg && (props.statusMessage || tags) && <>&nbsp;({timerExecutionMsg})</>}
                     </OverviewItemLine>
                 )}
                 {(props.statusMessage || tags) && (
@@ -170,7 +171,9 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                         )}
                     </OverviewItemLine>
                 )}
-                {timerExecutionMsg && <OverviewItemLine small>{timerExecutionMsg}</OverviewItemLine>}
+                {timerExecutionMsg && !(props.statusMessage || tags) && (
+                    <OverviewItemLine small>{timerExecutionMsg}</OverviewItemLine>
+                )}
             </OverviewItemDescription>
             <OverviewItemActions>
                 {activityActions &&

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -241,9 +241,18 @@ const AutoSuggestion = ({
             dispatch({
                 changes: { from: 0, to: currentCm.current.state?.doc.length, insert: initialValue },
             });
+            // Validate initial value change
+            checkValuePathValidity(initialValue)
         }
     }, [initialValue, reInitOnInitialValueChange]);
 
+    React.useEffect(() => {
+        if(currentCm.current) {
+            // Validate initial value
+            checkValuePathValidity(initialValue)
+        }
+    }, [currentCm.current!!])
+
     const setCurrentIndex = (newIndex: number) => {
         editorState.index = newIndex;
         setFocusedIndex(newIndex);

package/src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx

@@ -15,9 +15,10 @@ export default {
     },
 } as Meta<typeof CodeAutocompleteField>;
 
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
 const Template: StoryFn<typeof CodeAutocompleteField> = (args) => (
     <OverlaysProvider>
-        <CodeAutocompleteField {...args} />
+        <CodeAutocompleteField {...args} key={++forcedUpdateKey} />
     </OverlaysProvider>
 );
 
@@ -63,7 +64,7 @@ const defaultProps: CodeAutocompleteFieldProps = {
     },
     placeholder:
         "The word before the cursor will be auto-completed. At the beginning or after a space, all results are shown.",
-    onChange(): any {
+    onChange(): void {
         // Do nothing
     },
 };

package/src/components/ContextOverlay/ContextOverlay.stories.tsx

@@ -4,31 +4,40 @@ import { PopoverInteractionKind, PopperModifierOverrides } from "@blueprintjs/co
 import { PopperPlacements } from "@blueprintjs/core";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { Button, ContextOverlay, HtmlContentBlock } from "../../index";
 
+const interactionKindOptions = { UNDEFINED: undefined, ...PopoverInteractionKind };
+const rootBoundaryOptions = { UNDEFINED: undefined, VIEWPORT: "viewport", DOCUMENT: "document" };
+const positioningStrategyOptions = { UNDEFINED: undefined, ABSOLUTE: "absolute", FIXED: "fixed" };
+
 export default {
     title: "Components/ContextOverlay",
     component: ContextOverlay,
     argTypes: {
         interactionKind: {
-            options: { UNDEFINED: undefined, ...PopoverInteractionKind },
+            options: Object.keys(interactionKindOptions),
+            mapping: interactionKindOptions,
         },
         placement: {
             options: PopperPlacements,
         },
         rootBoundary: {
-            options: { UNDEFINED: undefined, VIEWPORT: "viewport", DOCUMENT: "document" },
+            options: Object.keys(rootBoundaryOptions),
+            mapping: rootBoundaryOptions,
         },
         positioningStrategy: {
-            options: { UNDEFINED: undefined, ABSOLUTE: "absolute", FIXED: "fixed" },
+            options: Object.keys(positioningStrategyOptions),
+            mapping: positioningStrategyOptions,
         },
     },
 } as Meta<typeof ContextOverlay>;
 
+let forcedUpdateKey = 0;
 const Template: StoryFn<typeof ContextOverlay> = (args) => (
     <OverlaysProvider>
-        <ContextOverlay {...args} />
+        <ContextOverlay {...args} key={++forcedUpdateKey} />
     </OverlaysProvider>
 );
 
@@ -55,4 +64,6 @@ Default.args = {
     } as PopperModifierOverrides,
     rootBoundary: "viewport",
     hasBackdrop: false,
+    onOpening: fn(),
+    onInteraction: fn(),
 };

package/src/components/Depiction/depiction.scss

@@ -72,6 +72,13 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
     .#{$eccgui}-overviewitem__list--highdensity > li > .#{$eccgui}-overviewitem__item & {
         height: $button-height;
     }
+    .#{$eccgui}-overviewitem__item--highdensity.#{$eccgui}-overviewitem__item--hasspacing > .#{$eccgui}-depiction &,
+    .#{$eccgui}-overviewitem__list--highdensity
+        > li
+        > .#{$eccgui}-overviewitem__item.#{$eccgui}-overviewitem__item--hasspacing
+        & {
+        height: calc(#{$button-height} - #{$eccgui-size-typo-base * 0.5});
+    }
 }
 
 .#{$eccgui}-depiction__image--disabled {

package/src/components/Dialog/stories/AlertDialog.stories.tsx

@@ -1,14 +1,16 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { AlertDialog } from "./../../../../index";
-import { Default as SimpleDialogExample } from "./SimpleDialog.stories";
+import simpleDialogStory, { Default as SimpleDialogExample } from "./SimpleDialog.stories";
 
 export default {
     title: "Components/Dialog/AlertDialog",
     component: AlertDialog,
     argTypes: {
+        ...simpleDialogStory.argTypes,
         headerOptions: { table: { disable: true } },
         children: { table: { disable: true } },
         actions: { table: { disable: true } },
@@ -42,4 +44,6 @@ Default.args = {
     success: false,
     warning: true,
     danger: false,
+    onOpening: fn(),
+    onClosing: fn(),
 };

package/src/components/Dialog/stories/Modal.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { SimpleCard } from "../../Card/stories/Card.stories";
 
@@ -11,8 +12,7 @@ export default {
     component: Modal,
     argTypes: {
         children: {
-            control: "none",
-            description: "Elements to include into the modal container.",
+            control: false,
         },
     },
 } as Meta<typeof Modal>;
@@ -30,4 +30,6 @@ Default.args = {
     isOpen: true,
     usePortal: false,
     children: <Card {...SimpleCard.args} />,
+    onOpening: fn(),
+    onClosing: fn(),
 };

package/src/components/Dialog/stories/SimpleDialog.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { SimpleDialog } from "./../../../../index";
 import { Default as CardActionsExample } from "./../../Card/stories/CardActions.stories";
@@ -14,10 +15,10 @@ export default {
     argTypes: {
         ...storyModal.argTypes,
         headerOptions: {
-            control: "none",
+            control: false,
         },
         actions: {
-            control: "none",
+            control: false,
         },
     },
 } as Meta<typeof SimpleDialog>;
@@ -39,4 +40,6 @@ Default.args = {
     hasBorder: true,
     isOpen: true,
     usePortal: false,
+    onOpening: fn(),
+    onClosing: fn(),
 };

package/src/components/Icon/canonicalIconNames.tsx

@@ -19,6 +19,8 @@ const canonicalIcons = {
     "artefact-commit": icons.Commit,
     "artefact-task-deleteprojectfiles": icons.TrashCan,
     "artefact-task-downloadfile": icons.CloudDownload,
+    "artefact-task-pivot": icons.Transpose,
+    "artefact-task-unpivot": icons.Transpose,
     "artefact-task-concatenatetofile": icons.DocumentExport,
     "artefact-dataset-csv": icons.Csv,
     "artefact-dataset-eccencadataplatform": icons.DataVis_1,
@@ -86,6 +88,7 @@ const canonicalIcons = {
     "item-vertmenu": icons.OverflowMenuHorizontal,
     "item-viewdetails": icons.View,
     "item-hidedetails": icons.ViewOff,
+    "item-image": icons.Image,
 
     "list-sortasc": icons.ArrowDown,
     "list-sortdesc": icons.ArrowUp,
@@ -127,6 +130,13 @@ const canonicalIcons = {
     "operation-filterremove": icons.FilterRemove,
     "operation-filter": icons.Filter,
     "operation-format-codeblock": icons.CodeBlock,
+    "operation-format-text-code": icons.Code,
+    "operation-format-text-bold": icons.TextBold,
+    "operation-format-text-italic": icons.TextItalic,
+    "operation-format-text-strikethrough": icons.TextStrikethrough,
+    "operation-format-list-bullet": icons.ListBulleted,
+    "operation-format-list-checked": icons.ListChecked,
+    "operation-format-list-numbered": icons.ListNumbered,
     "operation-fix": icons.Tools,
     "operation-link": icons.Link,
     "operation-logout": icons.Logout,

package/src/components/OverviewItem/OverviewItem.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import Card, { CardProps } from "../Card/Card";
 
 export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -11,6 +12,17 @@ export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement>
      * Add a bit white space around the element.
      */
     hasSpacing?: boolean;
+    /**
+     * Uses a `Card` element to wrap the `OverviewItem` inside.
+     * It is always used with `isOnlyLayout` set to `true`.
+     * Should be used together with `hasSpacing`.
+     */
+    hasCardWrapper?: boolean;
+    /**
+     * Forwarding basic `Card` properties to the wrapper element.
+     * Only used if `hasCardWrapper` is set to `true`.
+     */
+    cardProps?: Omit<CardProps, "children" | "isOnlyLayout" | "fullHeight" | "whitespaceAmount" | "compact">;
 }
 
 /**
@@ -22,6 +34,8 @@ export const OverviewItem = ({
     className = "",
     densityHigh = false,
     hasSpacing = false,
+    hasCardWrapper = false,
+    cardProps,
     ...otherProps
 }: OverviewItemProps) => {
     const item = (
@@ -38,6 +52,7 @@ export const OverviewItem = ({
         </div>
     );
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const accessibilityParameters: { [key: string]: any } = Object.create(null);
     if (typeof otherProps.onClick !== "undefined" || typeof otherProps.onKeyDown !== "undefined") {
         accessibilityParameters["tabIndex"] = 0;
@@ -46,7 +61,15 @@ export const OverviewItem = ({
         accessibilityParameters["role"] = "button";
     }
 
-    return React.cloneElement(item, accessibilityParameters);
+    const element = React.cloneElement(item, accessibilityParameters);
+
+    return hasCardWrapper ? (
+        <Card isOnlyLayout {...cardProps}>
+            {element}
+        </Card>
+    ) : (
+        element
+    );
 };
 
 export default OverviewItem;

package/src/components/OverviewItem/OverviewItemList.tsx

@@ -5,6 +5,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListElement> {
     /**
      * Displays the element using reduced height and less white space inside.
+     * @deprecated (v25) use property directly on `OverviewItem` children.
      */
     densityHigh?: boolean;
     /**
@@ -23,8 +24,8 @@ export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListEle
 }
 
 /**
- * This element can include all basic information and actions to give an overview about the item.
- * Mainly used in items list or to create basic widgets.
+ * This component is a listing container for multiple `OverviewItem` elements.
+ * It should only contains `OverviewItem` children but it does not check and control that condition.
  */
 export const OverviewItemList = ({
     children,