@eccenca/gui-elements 25.1.0-rc.4 → 25.2.0-featuredarkthemesupportcmem7503.0

package/src/components/Button/Button.tsx

@@ -47,7 +47,7 @@ interface AdditionalButtonProps {
     /**
      * takes in either a string of text or a react element to display as a tooltip when the button is hovered.
      */
-    tooltip?: string | JSX.Element | null;
+    tooltip?: string | React.JSX.Element | null;
     /**
      * Object with additional properties for the tooltip.
      */
@@ -55,19 +55,17 @@ interface AdditionalButtonProps {
     /**
      * Icon displayed on button start.
      */
-    icon?: ValidIconName | JSX.Element;
+    icon?: ValidIconName | React.JSX.Element;
     /**
      * Icon displayed on button end.
      */
-    rightIcon?: ValidIconName | JSX.Element;
+    rightIcon?: ValidIconName | React.JSX.Element;
 }
 
 interface ExtendedButtonProps
-    extends AdditionalButtonProps,
-        Omit<BlueprintButtonProps, "intent" | "icon" | "rightIcon"> {}
+    extends AdditionalButtonProps, Omit<BlueprintButtonProps, "intent" | "icon" | "rightIcon"> {}
 interface ExtendedAnchorButtonProps
-    extends AdditionalButtonProps,
-        Omit<BlueprintAnchorButtonProps, "intent" | "icon" | "rightIcon"> {}
+    extends AdditionalButtonProps, Omit<BlueprintAnchorButtonProps, "intent" | "icon" | "rightIcon"> {}
 
 export type ButtonProps = ExtendedButtonProps & ExtendedAnchorButtonProps;
 
@@ -104,13 +102,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" && (
@@ -137,8 +140,7 @@ export const Button = ({
 };
 
 interface constructBadgePropertiesProps
-    extends Pick<ButtonProps, "intent" | "badgeProps">,
-        Pick<BlueprintButtonProps, "minimal" | "outlined"> {}
+    extends Pick<ButtonProps, "intent" | "badgeProps">, Pick<BlueprintButtonProps, "minimal" | "outlined"> {}
 
 const constructBadgeProperties = ({ intent, minimal, outlined, badgeProps = {} }: constructBadgePropertiesProps) => {
     if (badgeProps.intent) return badgeProps;

package/src/components/Button/button.scss

@@ -9,7 +9,7 @@ $button-border-radius: $pt-border-radius;
 
 // $button-padding-small: 0 ($pt-grid-size * 0.7) !default;
 // $button-padding-large: ($pt-grid-size * 0.5) ($pt-grid-size * 1.5) !default;
-// $button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
+$button-icon-spacing: $pt-grid-size * 0.5; // ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
 // $button-icon-spacing-large: ($pt-button-height-large - $pt-icon-size-large) * 0.5 !default;
 // $button-box-shadow: inset 0 0 0 $button-border-width rgba($black, 0.2), inset 0 (-$button-border-width) 0 rgba($black, 0.1) !default;
 // $button-box-shadow-active: inset 0 0 0 $button-border-width rgba($black, 0.2), inset 0 1px 2px rgba($black, 0.2) !default;
@@ -51,8 +51,7 @@ $dark-button-gradient: $button-gradient; // !default;
 
 $button-intents: (
     // default - hover - active
-    "primary":
-        (
+    "primary": (
             eccgui-color-var("identity", "brand", "900"),
             eccgui-color-mix(
                 eccgui-color-var("identity", "brand", "900"),
@@ -166,7 +165,9 @@ $button-intents: (
     // special case override: blueprint do not use configured colors here
     @include eccgui-enhance-blueprint-button-intent("primary");
     @include eccgui-enhance-blueprint-button-intent("accent");
+    @include eccgui-enhance-blueprint-button-intent("success");
     @include eccgui-enhance-blueprint-button-intent("warning");
+    @include eccgui-enhance-blueprint-button-intent("danger");
 }
 
 .#{$ns}-button-text {

package/src/components/Card/CardContent.tsx

@@ -15,23 +15,20 @@ export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
  * Holds the card content.
  * Display scrollbars in case there is not enough space for it.
  */
-export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(({
-    children,
-    className='',
-    noFlexHeight,
-    ...otherProps
-}: CardContentProps, ref) => {
-    return (
-        <div
-            {...otherProps}
-            ref={ref}
-            className={
-                `${eccgui}-card__content` +
-                (noFlexHeight ? ` ${eccgui}-card__content--noflexheight` : "") +
-                (className ? ` ${className}` : "")
-            }
-        >
-            {children}
-        </div>
-    );
-});
+export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
+    ({ children, className = "", noFlexHeight, ...otherProps }: CardContentProps, ref) => {
+        return (
+            <div
+                {...otherProps}
+                ref={ref}
+                className={
+                    `${eccgui}-card__content` +
+                    (noFlexHeight ? ` ${eccgui}-card__content--noflexheight` : "") +
+                    (className ? ` ${className}` : "")
+                }
+            >
+                {children}
+            </div>
+        );
+    },
+);

package/src/components/Card/CardHeader.tsx

@@ -8,7 +8,7 @@ import CardOptions from "./CardOptions";
 import CardTitle from "./CardTitle";
 
 export interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
-    children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
+    children: React.JSX.Element | (React.JSX.Element | undefined | null)[] | null | undefined;
 }
 
 export const CardHeader = ({ children, className = "", ...otherProps }: CardHeaderProps) => {

package/src/components/Card/card.scss

@@ -38,10 +38,14 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 
     &.#{$ns}-selected {
         background-color: $card-selected-background-color;
-        box-shadow: 0 0 0 3px eccgui-color-rgba($eccgui-color-accent, 0.2), 0 0 0 1px $eccgui-color-accent;
+        box-shadow:
+            0 0 0 3px eccgui-color-rgba($eccgui-color-accent, 0.2),
+            0 0 0 1px $eccgui-color-accent;
 
         &.#{$ns}-interactive {
-            box-shadow: 0 0 0 3px eccgui-color-rgba($eccgui-color-accent, 0.2), 0 0 0 1px $eccgui-color-accent;
+            box-shadow:
+                0 0 0 3px eccgui-color-rgba($eccgui-color-accent, 0.2),
+                0 0 0 1px $eccgui-color-accent;
 
             &:hover {
                 background-color: eccgui-color-mix($card-selected-background-color, $button-background-color-hover);
@@ -83,8 +87,8 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     }
 
     .#{$eccgui}-card--whitespace-large > header > & {
-        padding: $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing *
-            2;
+        padding: $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing
+            $eccgui-size-card-spacing * 2;
     }
 }
 

package/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";

package/src/components/Chat/ChatArea.tsx

@@ -8,8 +8,7 @@ import { Spacing, SpacingProps } from "./../Separation/Spacing";
 import { ChatFieldProps } from "./ChatField";
 
 export interface ChatAreaProps
-    extends Omit<FlexibleLayoutContainerProps, "vertical" | "noEqualItemSpace">,
-        TestableComponent {
+    extends Omit<FlexibleLayoutContainerProps, "vertical" | "noEqualItemSpace">, TestableComponent {
     /**
      * The inut field for the chat.
      */

package/src/components/Chat/_chat.scss

@@ -1,5 +1,5 @@
 .#{$eccgui}-chat__content {
-    @extend .bp5-elevation-1;
+    @extend .#{$ns}-elevation-1;
 
     position: relative;
     z-index: 0;
@@ -32,7 +32,7 @@
         position: relative;
 
         &::before {
-            @extend .bp5-elevation-1;
+            @extend .#{$ns}-elevation-1;
 
             position: absolute;
             top: calc(#{mini-units(3)} - #{0.5 * $eccgui-size-block-whitespace});

package/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",

package/src/components/Checkbox/checkbox.scss

@@ -64,6 +64,15 @@ $switch-checked-background-color-disabled: eccgui-color-rgba(
             // TODO: set set icon line colors here we need a custom js inject like blueprint uses
             color: $eccgui-color-checkbox-checked;
             background-image: url("~@carbon/icons/svg/32/checkbox.svg");
+
+            @media (prefers-color-scheme: dark) {
+                filter: invert(1);
+            }
+
+            html:has(.#{$eccgui}-application__container.#{$eccgui}-palette--dark) :not(.#{$eccgui}-palette--light) &,
+            .#{$eccgui}-palette--dark :not(.#{$eccgui}-palette--light) & {
+                filter: invert(1);
+            }
         }
         input:checked ~ .#{$ns}-control-indicator::before {
             background-image: url("~@carbon/icons/svg/32/checkbox--checked.svg");

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

@@ -1,15 +1,21 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
+import { helpersArgTypes } from "../../../.storybook/helpers";
 import { CodeAutocompleteField, CodeAutocompleteFieldProps } from "../../../index";
 import { CodeAutocompleteFieldPartialAutoCompleteResult } from "../AutoSuggestion/AutoSuggestion";
 
 export default {
     title: "Forms/CodeAutocompleteField",
     component: CodeAutocompleteField,
-    argTypes: {},
+    argTypes: {
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "primary", "accent", "success", "warning", "danger"],
+        },
+    },
     args: {
         onInputChecked: fn(),
     },
@@ -28,7 +34,7 @@ const defaultProps: CodeAutocompleteFieldProps = {
     initialValue: "",
     fetchSuggestions(
         inputString: string,
-        cursorPosition: number
+        cursorPosition: number,
     ):
         | CodeAutocompleteFieldPartialAutoCompleteResult
         | undefined

package/src/components/ColorField/ColorField.test.tsx

@@ -29,7 +29,7 @@ describe("ColorField", () => {
                         ["my-black", "#000000"],
                         ["my-white", "#ffffff"],
                     ]}
-                />
+                />,
             );
             // With default palette settings, a text input with readOnly is shown
             expect(container.querySelector("input[type='text']")).toBeInTheDocument();

package/src/components/ColorField/ColorField.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties } from "react";
 import classNames from "classnames";
-import Color from "color";
+import { ColorLike } from "color";
 
 import { utils } from "../../common";
 import { getEnabledColorsProps } from "../../common/utils/colorHash";
@@ -14,7 +14,7 @@ import { TextField, TextFieldProps } from "../TextField";
 import { Tooltip } from "../Tooltip/Tooltip";
 import { WhiteSpaceContainer } from "../Typography";
 
-type ColorPresets = [string, string][] | [string, Color][];
+type ColorPresets = [string, string][] | [string, ColorLike][];
 type ColorPresetConfiguration = Pick<getEnabledColorsProps, "includeColorWeight" | "includePaletteGroup">;
 
 export interface ColorFieldProps extends Omit<TextFieldProps, "invisibleCharacterWarning"> {
@@ -108,7 +108,7 @@ export const ColorField = ({
                     )}
                     <FieldSet>
                         <TagList className={`${eccgui}-colorfield__palette`}>
-                            {colorPresets!.map((color: [string, string | Color], idx: number) => [
+                            {colorPresets!.map((color: [string, ColorLike], idx: number) => [
                                 <RadioButton
                                     key={idx}
                                     className={`${eccgui}-colorfield__palette__color`}
@@ -123,7 +123,7 @@ export const ColorField = ({
                                             large
                                             style={{ [`--eccgui-colorfield-palette-color`]: color[1] } as CSSProperties}
                                         >
-                                            {color[1]}
+                                            {typeof color[1] === "string" ? color[1] : color[1].toString()}
                                         </Tag>
                                     </Tooltip>
                                 </RadioButton>,
@@ -162,7 +162,7 @@ const listColorPalettePresets = (colorPaletteSet = defaultColorPaletteSet) => {
             ...colorPaletteSet,
             minimalColorDistance: 0, // we use all allowed colors, and do not check distances between them
         })
-        .map((color: [string, string | Color]) => [
+        .map((color: [string, ColorLike]) => [
             color[0].replace(`${eccgui}-color-palette-`, ""),
             color[1],
         ]) as ColorPresets;
@@ -180,7 +180,7 @@ ColorField.calculateColorHashValue = (
     options: calculateColorHashValueProps = {
         ...defaultColorPaletteSet,
         allowCustomColor: false,
-    }
+    },
 ) => {
     const hash = utils.textToColorHash({
         text,

package/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",

package/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 {
     /**
@@ -128,7 +128,7 @@ export const ContentGroup = ({
                 acc.push(
                     `${color.rgb().toString()} ` +
                         `${(index / borderColors.length) * 100}% ` +
-                        `${((index + 1) / borderColors.length) * 100}%`
+                        `${((index + 1) / borderColors.length) * 100}%`,
                 );
             } catch {
                 // eslint-disable-next-line no-console
@@ -162,12 +162,12 @@ export const ContentGroup = ({
                                 "h" +
                                     Math.min(
                                         Math.max(minimumHeadlineLevel, level + minimumHeadlineLevel),
-                                        6
+                                        6,
                                     ).toString(),
                                 {
                                     children: <OverflowText>{title}</OverflowText>,
                                     className: `${eccgui}-contentgroup__header__title`,
-                                }
+                                },
                             )}
                             {description && (
                                 <>

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ValidIconName } from "../Icon/canonicalIconNames";
-import IconButton from "../Icon/IconButton";
+import { IconButton, IconButtonProps } from "../Icon/IconButton";
 import { TestableComponent } from "../interfaces";
 import Menu from "../Menu/Menu";
 
@@ -17,19 +17,24 @@ export interface ContextMenuProps extends TestableComponent {
      * The elements of the context menu.
      * They will be wrapped in a `Menu` element automatically.
      */
-    children?: JSX.Element | JSX.Element[];
+    children?: React.JSX.Element | React.JSX.Element[];
     /**
      * Toggler that need to be used to display menu.
      * If a valid icon name is used then the icon element is displayed.
      * In this case `togglerText`, `togglerLarge` and `tooltipAsTitle` are used, too.
      */
-    togglerElement?: ValidIconName | JSX.Element;
+    togglerElement?: ValidIconName | React.JSX.Element;
     /**
      * Text displayed as title or tooltip on toggler element.
      */
     togglerText?: string;
+    /**
+     * Allow to de- and increase the size of the default toggler button.
+     */
+    togglerSize?: IconButtonProps["size"];
     /**
      * Toggler element is displayed larger than normal.
+     * @deprecated (v27) use `togglerSize="large" instead
      */
     togglerLarge?: boolean;
     /**
@@ -62,6 +67,7 @@ export const ContextMenu = ({
     contextOverlayProps,
     disabled,
     togglerLarge = false,
+    togglerSize,
     /* FIXME: The Tooltip component can interfere with the opened menu, since it is implemented via portal and may cover the menu,
               so by default we use the title attribute instead of Tooltip. */
     tooltipAsTitle = true,
@@ -76,7 +82,7 @@ export const ContextMenu = ({
                 tooltipAsTitle={tooltipAsTitle}
                 name={[togglerElement]}
                 text={togglerText}
-                large={togglerLarge}
+                size={togglerLarge ? "large" : togglerSize}
                 disabled={!!disabled}
                 data-test-id={dataTestId ?? undefined}
                 data-testid={dataTestid ?? undefined}

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

@@ -4,7 +4,7 @@ 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 { fn } from "storybook/test";
 
 import { Button, ContextOverlay, HtmlContentBlock } from "../../index";
 

package/src/components/ContextOverlay/ContextOverlay.tsx

@@ -7,13 +7,14 @@ import {
     Utils as BlueprintUtils,
 } from "@blueprintjs/core";
 
-import { CLASSPREFIX as eccgui, WhiteSpaceContainer, WhiteSpaceContainerProps } from "../../index";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { WhiteSpaceContainer, WhiteSpaceContainerProps } from "../Typography";
 
 export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "position"> {
     /**
      * `target` element to use as toggler for the overlay display.
      */
-    children?: JSX.Element;
+    children?: React.JSX.Element;
     /**
      * Type of counter property to `Modal.forceTopPosition`.
      * Use it when you need to display modal dialogs out of the context overlay.
@@ -56,7 +57,7 @@ export const ContextOverlay = ({
             !otherPopoverProps.defaultIsOpen &&
             !otherPopoverProps.isOpen &&
             otherPopoverProps.renderTarget === undefined &&
-            usePlaceholder
+            usePlaceholder,
     );
 
     const swap = (ev: MouseEvent | globalThis.FocusEvent) => {
@@ -83,7 +84,7 @@ export const ContextOverlay = ({
             replacePlaceholder,
             // we delay the swap for hover/focus to prevent unwanted effects
             // (e.g. event hickup after replacing elements when it is not really necessary)
-            swapDelayTime
+            swapDelayTime,
         );
     };
 
@@ -115,7 +116,7 @@ export const ContextOverlay = ({
         return () => {};
     }, [!!placeholderRef.current, otherPopoverProps.interactionKind]);
 
-    const refocus = React.useCallback((node) => {
+    const refocus = React.useCallback((node: any) => {
         const target = node?.targetRef.current.children[0];
         if (!eventMemory.current || !target) {
             return;
@@ -135,7 +136,7 @@ export const ContextOverlay = ({
                     {
                         capture: true,
                         once: true,
-                    }
+                    },
                 );
                 break;
         }
@@ -163,7 +164,7 @@ export const ContextOverlay = ({
                 tabIndex:
                     childTarget.props.tabIndex ??
                     (!otherPopoverProps?.disabled && otherPopoverProps?.openOnTargetFocus ? 0 : undefined),
-            })
+            }),
         );
     };
 
@@ -176,8 +177,9 @@ export const ContextOverlay = ({
     ) : (
         <BlueprintPopover
             placement="bottom"
-            content={content ? (
-                paddingSize ? (
+            content={
+                content ? (
+                    paddingSize ? (
                         <WhiteSpaceContainer
                             paddingTop={paddingSize}
                             paddingRight={paddingSize}
@@ -186,8 +188,11 @@ export const ContextOverlay = ({
                         >
                             {content}
                         </WhiteSpaceContainer>
-                    ) : content
-            ) : undefined}
+                    ) : (
+                        content
+                    )
+                ) : undefined
+            }
             {...otherPopoverProps}
             className={targetClassName}
             portalClassName={portalClassNameFinal.trim() ?? undefined}

package/src/components/ContextOverlay/tests/ContextOverlay.test.tsx

@@ -40,7 +40,7 @@ describe("ContextOverlay", () => {
                 {...ContextOverlayStory.args}
                 usePlaceholder={false}
                 interactionKind={PopoverInteractionKind.HOVER}
-            />
+            />,
         );
         fireEvent.mouseEnter(container.getElementsByClassName(overlayWrapper)[0]);
         expect(await screen.findByText("Overlay:")).toBeVisible();
@@ -56,7 +56,7 @@ describe("ContextOverlay", () => {
                 {...ContextOverlayStory.args}
                 usePlaceholder={true}
                 interactionKind={PopoverInteractionKind.HOVER}
-            />
+            />,
         );
         checkForPlaceholderClass(container, 1);
         fireEvent.mouseEnter(container.getElementsByClassName(overlayWrapper)[0]);

package/src/components/DecoupledOverlay/DecoupledOverlay.tsx

@@ -3,10 +3,15 @@ import { createPortal } from "react-dom";
 import { Classes as BlueprintClasses } from "@blueprintjs/core";
 import { createPopper } from "@popperjs/core";
 
-import { CLASSPREFIX as eccgui, ContextOverlayProps, TestableComponent, TooltipSize, WhiteSpaceContainer } from "../../index";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { ContextOverlayProps } from "../ContextOverlay";
+import { TestableComponent } from "../interfaces";
+import { TooltipSize } from "../Tooltip/Tooltip";
+import WhiteSpaceContainer from "../Typography/WhiteSpaceContainer";
 
 export interface DecoupledOverlayProps
-    extends React.HTMLAttributes<HTMLDivElement>,
+    extends
+        React.HTMLAttributes<HTMLDivElement>,
         TestableComponent,
         Pick<ContextOverlayProps, "usePortal" | "portalContainer" | "placement" | "minimal" | "paddingSize"> {
     /**
@@ -55,7 +60,7 @@ export const DecoupledOverlay = ({
                 });
             }
         },
-        [targetSelectorOrElement]
+        [targetSelectorOrElement],
     );
 
     const overlay = (
@@ -86,7 +91,9 @@ export const DecoupledOverlay = ({
                     >
                         {children}
                     </WhiteSpaceContainer>
-                ) : children}
+                ) : (
+                    children
+                )}
             </div>
         </div>
     );

package/src/components/Depiction/Depiction.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef } from "react";
 import SVG from "react-inlinesvg";
-import Color from "color";
+import Color, { ColorLike } from "color";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { BadgeProps } from "../Badge/Badge";
@@ -46,7 +46,7 @@ export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
      * Color that is used for the depiction background.
      * This may be important if you use PNG, SVG or other image types that can have transparent background areas.
      */
-    backgroundColor?: Color | string | "light" | "dark";
+    backgroundColor?: ColorLike | "light" | "dark";
     /**
      * The depiction is displayed with a border around it.
      */
@@ -65,7 +65,7 @@ export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Description of the depiction.
      */
-    caption?: string | JSX.Element;
+    caption?: string | React.JSX.Element;
     /**
      * How is the caption displayed.
      */
@@ -111,7 +111,7 @@ export function Depiction({
                 [`--${eccgui}-depiction-background`]: color.rgb().toString(),
                 [`--${eccgui}-depiction-color`]: decideContrastColorValue({ testColor: color }),
             };
-        } catch (ex) {
+        } catch {
             // eslint-disable-next-line no-console
             console.warn("Received invalid background color for depiction: " + backgroundColor);
         }
@@ -130,7 +130,7 @@ export function Depiction({
             }
             el.setAttribute("preserveAspectRatio", preserveAspectRatio);
         },
-        [resizing]
+        [resizing],
     );
 
     const inlineSvgCall = useCallback(
@@ -139,7 +139,7 @@ export function Depiction({
                 updateSvgResizing(svgElement);
             }
         },
-        [updateSvgResizing]
+        [updateSvgResizing],
     );
 
     useEffect(() => {