@eccenca/gui-elements 25.1.0 → 25.2.0-featureupgradeblueprintjsv6cmem7139.0

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(() => {

package/src/components/Dialog/Modal.tsx

@@ -81,19 +81,21 @@ export const Modal = ({
     preventReactFlowEvents = true,
     ...otherProps
 }: ModalProps) => {
-    const modalContext = React.useContext(ModalContext)
-    const uniqueModalId = React.useRef<string>(modalId ?? Date.now().toString(36) + Math.random().toString(36).substring(2))
+    const modalContext = React.useContext(ModalContext);
+    const uniqueModalId = React.useRef<string>(
+        modalId ?? Date.now().toString(36) + Math.random().toString(36).substring(2),
+    );
 
     React.useEffect(() => {
         return () => {
             // Make sure to always remove flag when modal is removed
-            modalContext.setModalOpen(uniqueModalId.current, false)
-        }
-    }, [])
+            modalContext.setModalOpen(uniqueModalId.current, false);
+        };
+    }, []);
 
     React.useEffect(() => {
-        modalContext.setModalOpen(uniqueModalId.current, otherProps.isOpen)
-    }, [otherProps.isOpen])
+        modalContext.setModalOpen(uniqueModalId.current, otherProps.isOpen);
+    }, [otherProps.isOpen]);
 
     const backdropProps: React.HTMLProps<HTMLDivElement> | undefined =
         !canOutsideClickClose && canEscapeKeyClose

package/src/components/Dialog/ModalContext.tsx

@@ -21,12 +21,12 @@ export const useModalContext = (): ModalContextProps => {
     // A stack of modal IDs. These should reflect a stacked opening of modals on top of each other.
     const currentOpenModalStack = React.useRef<string[]>([]);
 
-    const setOpenModalStack = ((stackUpdateFunction: (old: string[]) => string[]) => {
-        currentOpenModalStack.current = stackUpdateFunction([...currentOpenModalStack.current])
-    })
+    const setOpenModalStack = (stackUpdateFunction: (old: string[]) => string[]) => {
+        currentOpenModalStack.current = stackUpdateFunction([...currentOpenModalStack.current]);
+    };
 
     const setModalOpen = React.useCallback((modalId: string, isOpen: boolean) => {
-        setOpenModalStack(old => {
+        setOpenModalStack((old) => {
             if (isOpen) {
                 return [...old, modalId];
             } else {
@@ -46,8 +46,8 @@ export const useModalContext = (): ModalContextProps => {
     }, []);
 
     const openModalStack = React.useCallback(() => {
-        return currentOpenModalStack.current.length ? [...currentOpenModalStack.current] : undefined
-    }, [])
+        return currentOpenModalStack.current.length ? [...currentOpenModalStack.current] : undefined;
+    }, []);
 
     return {
         openModalStack,

package/src/components/Dialog/SimpleDialog.tsx

@@ -30,7 +30,7 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
     /**
      * Can contain elements actionable/non-actionable elements display right-aligned to the dialog title.
      */
-    headerOptions?: null | JSX.Element | JSX.Element[];
+    headerOptions?: null | React.JSX.Element | React.JSX.Element[];
     /**
      * If enabled neither closing via `esc` key or clicking outside of the component will work, except explicitly specified.
      */

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

@@ -1,7 +1,7 @@
 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 { AlertDialog } from "./../../../../index";
 import simpleDialogStory, { Default as SimpleDialogExample } from "./SimpleDialog.stories";

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

@@ -1,11 +1,11 @@
 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 { SimpleCard } from "../../Card/stories/Card.stories";
 
-import { Card, Modal } from "./../../../../index";
+import { Card, Modal } from "./../../../components";
 
 export default {
     title: "Components/Dialog/Modal",

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

@@ -1,7 +1,7 @@
 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 { SimpleDialog } from "./../../../../index";
 import { Default as CardActionsExample } from "./../../Card/stories/CardActions.stories";

package/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx

@@ -43,7 +43,7 @@ export const FlexibleLayoutContainer = forwardRef<HTMLDivElement, FlexibleLayout
             gapSize = "none",
             ...otherDivProps
         }: FlexibleLayoutContainerProps,
-        ref
+        ref,
     ) => {
         return (
             <div
@@ -61,7 +61,7 @@ export const FlexibleLayoutContainer = forwardRef<HTMLDivElement, FlexibleLayout
                 {children}
             </div>
         );
-    }
+    },
 );
 
 export default FlexibleLayoutContainer;

package/src/components/FlexibleLayout/FlexibleLayoutItem.tsx

@@ -34,7 +34,7 @@ export const FlexibleLayoutItem = forwardRef<HTMLDivElement, FlexibleLayoutItemP
             style,
             ...otherDivProps
         }: FlexibleLayoutItemProps,
-        ref
+        ref,
     ) => {
         const sizing = {} as any;
         if (typeof growFactor !== "undefined" && growFactor >= 0 && growFactor !== 1) {
@@ -53,7 +53,7 @@ export const FlexibleLayoutItem = forwardRef<HTMLDivElement, FlexibleLayoutItemP
                 {children}
             </div>
         );
-    }
+    },
 );
 
 export default FlexibleLayoutItem;

package/src/components/Form/FieldItem.tsx

@@ -24,7 +24,7 @@ export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, Te
      * Text for user help.
      * Is displayed between label and input element.
      */
-    helperText?: string | JSX.Element;
+    helperText?: string | React.JSX.Element;
     /**
      * Feedback notification.
      * Is displayed below the included input element.

package/src/components/Form/FieldSet.tsx

@@ -16,17 +16,17 @@ export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFie
     /**
      * Optional helper text. If given then it is displayed after the title.
      */
-    helperText?: string | JSX.Element;
+    helperText?: string | React.JSX.Element;
     /**
      * Optional notification text.
      * If given then it is displayed before the fieldset content and is colored reagarding the set intent state.
      */
-    messageText?: string | JSX.Element;
+    messageText?: string | React.JSX.Element;
     /**
      * Optional title, set the fieldset legend and if given it is display on top, colored reagarding the set intent state.
      *
      */
-    title?: string | JSX.Element;
+    title?: string | React.JSX.Element;
 }
 
 /**

package/src/components/Form/Stories/FieldItem.stories.tsx

@@ -3,7 +3,7 @@ import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
-import { FieldItem, TextField } from "../../../../index";
+import { FieldItem, TextField } from "../../../components";
 
 export default {
     title: "Forms/FieldItem",

package/src/components/Form/Stories/FieldSet.stories.tsx

@@ -3,7 +3,7 @@ import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
-import { FieldItem, FieldItemRow, FieldSet, TitleSubsection } from "../../../../index";
+import { FieldItem, FieldItemRow, FieldSet, TitleSubsection } from "../../../components";
 
 import { Default as SimpleFieldItemExample } from "./FieldItem.stories";
 import { Default as SimpleFieldItemRowExample } from "./FieldItemRow.stories";

package/src/components/Grid/Grid.tsx

@@ -4,8 +4,10 @@ import { GridProps as CarbonGridProps } from "@carbon/react/es/components/Grid";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface GridProps
-    extends Omit<CarbonGridProps<"article" | "section" | "div">, "fullWidth" | "columns" | "narrow" | "as"> {
+export interface GridProps extends Omit<
+    CarbonGridProps<"article" | "section" | "div">,
+    "fullWidth" | "columns" | "narrow" | "as"
+> {
     /**
      * The available grid height can be distributed between multiple rows.
      * To do so the `verticalStretched` property must be set for the `<GridRow />` element that need to be stretched.

package/src/components/Grid/stories/GridColumn.stories.tsx

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

package/src/components/Grid/stories/GridRow.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Grid, GridColumn, GridRow } from "../../../../index";
+import { Grid, GridColumn, GridRow } from "../../../components";
 
 import { Default as ColumnExample } from "./GridColumn.stories";
 

package/src/components/HoverToggler/HoverToggler.tsx

@@ -10,12 +10,12 @@ export interface HoverTogglerProps extends Omit<React.HTMLAttributes<HTMLDivElem
     /**
      * The content that is shown when not hovered.
      */
-    baseContent: JSX.Element;
+    baseContent: React.JSX.Element;
     baseContentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
     /**
      * The content that is shown when hovered.
      */
-    hoverContent: JSX.Element;
+    hoverContent: React.JSX.Element;
     hoverContentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
     /**
      * Display as inline element.

package/src/components/Icon/Icon.tsx

@@ -14,7 +14,7 @@ export interface IconProps extends Omit<BaseIconProps, "iconComponent"> {
 /** Returns the first icon that exists or the fallback icon. */
 const findExistingIcon = (
     iconName: ValidIconName | string[],
-    fallbackItem: CarbonIconType = canonicalIcons["undefined"]
+    fallbackItem: CarbonIconType = canonicalIcons["undefined"],
 ): CarbonIconType => {
     if (typeof iconName === "string") {
         return canonicalIcons[iconName] ?? fallbackItem;

package/src/components/Icon/IconButton.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Button, { ButtonProps } from "../Button/Button";
-import {TestableComponent} from "../interfaces";
+import { TestableComponent } from "../interfaces";
 
 import { ValidIconName } from "./canonicalIconNames";
 import Icon, { IconProps } from "./Icon";
@@ -54,8 +54,8 @@ export const IconButton = ({
         swapPlaceholderDelay: 10,
     };
     const iconProps = {
-        small: restProps.small,
-        large: restProps.large,
+        small: restProps.small || restProps["size"] === "small",
+        large: restProps.large || restProps["size"] === "large",
         tooltipText: tooltipAsTitle ? undefined : text,
         tooltipProps: tooltipProps
             ? {

package/src/components/Icon/canonicalIconNames.tsx

@@ -40,6 +40,7 @@ const canonicalIcons = {
     "artefact-task-sendemail": icons.Email,
     "artefact-dataset-csv": icons.Csv,
     "artefact-dataset-eccencadataplatform": icons.DataVis_1,
+    "artefact-dataset-inmemory": icons.DataVis_1,
     "artefact-dataset-excel": icons.Xls,
     "artefact-dataset-file": icons.DataVis_1,
     "artefact-dataset": icons.Data_2,

package/src/components/Icon/icon.scss

@@ -32,15 +32,15 @@ svg.#{$eccgui}-icon {
 }
 
 .#{$ns}-button .#{$eccgui}-icon:first-child {
-    margin-left: -($pt-button-height - $pt-icon-size-standard) * 0.5;
+    margin-left: -($button-icon-spacing);
 }
 .#{$ns}-button .#{$eccgui}-icon:last-child {
-    margin-right: -($pt-button-height - $pt-icon-size-standard) * 0.5;
+    margin-right: -($button-icon-spacing);
 }
 
 .#{$ns}-button .#{$eccgui}-icon:first-child:last-child,
 .#{$ns}-button .#{$ns}-spinner + .#{$eccgui}-icon:last-child {
-    margin: 0 (-($pt-button-height - $pt-icon-size-standard) * 0.5);
+    margin: 0 (-($button-icon-spacing));
 }
 
 .#{$eccgui}-button--icon {
@@ -49,7 +49,7 @@ svg.#{$eccgui}-icon {
     }
 
     & > .#{$ns}-button-text {
-        margin-left: -5px;
+        margin-left: -($pt-grid-size) * 0.5;
     }
 
     & > .#{$eccgui}-tooltip__wrapper + .#{$ns}-button-text {

package/src/components/Icon/stories/Icon.stories.tsx

@@ -84,7 +84,7 @@ export const IconsOverview = () => {
                         ) {
                             section = iconName.substring(
                                 0,
-                                iconName.indexOf("-") > 0 ? iconName.indexOf("-") : iconName.length
+                                iconName.indexOf("-") > 0 ? iconName.indexOf("-") : iconName.length,
                             );
                             separation = (
                                 <FlexibleLayoutItem style={{ width: "100%", padding: "1rem 0 0.5rem 0" }}>

package/src/components/Icon/stories/IconButton.stories.tsx

@@ -3,7 +3,7 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { IconButton, TestIcon } from "../../../../index";
+import { IconButton, TestIcon } from "../../../components";
 
 import buttonStory from "./../../Button/Button.stories";
 import canonicalIcons from "./../canonicalIconNames";

package/src/components/Icon/stories/TestIcon.stories.tsx

@@ -3,8 +3,8 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { TestIcon } from "../../../../index";
 import { Definitions } from "../../../common/Intent";
+import { TestIcon } from "../TestIcon";
 
 export default {
     title: "Components/Icon/TestIcon",

package/src/components/Icon/transformIcon.tsx

@@ -1,17 +1,19 @@
 import React from "react";
-import { CarbonIconType, CarbonIconProps } from "@carbon/react/icons";
+import { CarbonIconProps, CarbonIconType } from "@carbon/react/icons";
 
-export const transform = (IconSymbol: CarbonIconType, rotate: number = 0, flipH: boolean = false, flipV: boolean = false) : CarbonIconType => {
-    return React.forwardRef((props: CarbonIconProps, ref: React.ForwardedRef<React.ReactSVGElement>) => {
+export const transform = (
+    IconSymbol: CarbonIconType,
+    rotate: number = 0,
+    flipH: boolean = false,
+    flipV: boolean = false,
+): CarbonIconType => {
+    return React.forwardRef((props: CarbonIconProps, ref: React.LegacyRef<SVGSVGElement>) => {
         return (
             <IconSymbol
                 {...props}
                 ref={ref}
-                transform={
-                    `scale(${flipH ? "-1" : "1"}, ${flipV ? "-1" : "1"}) rotate(${rotate})`
-                }
+                transform={`scale(${flipH ? "-1" : "1"}, ${flipV ? "-1" : "1"}) rotate(${rotate})`}
             />
         );
-    })
-}
-
+    });
+};

package/src/components/Iframe/Iframe.tsx

@@ -42,7 +42,7 @@ export const Iframe = React.forwardRef<HTMLIFrameElement, IframeProps>(
             htmlIframeProps = {},
             ...otherReactProps
         }: IframeProps,
-        ref
+        ref,
     ) => {
         const [isLoaded, setIsLoaded] = useState<boolean>(false);
         const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
@@ -98,7 +98,7 @@ export const Iframe = React.forwardRef<HTMLIFrameElement, IframeProps>(
                 />
             </div>
         );
-    }
+    },
 );
 
 export default Iframe;

package/src/components/Label/Label.tsx

@@ -9,15 +9,15 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
     /**
      * Label text.
      */
-    text?: string | JSX.Element;
+    text?: string | React.JSX.Element;
     /**
      * Short info about label semantic, it is displayed in parentesis after the label text.
      */
-    info?: string | JSX.Element;
+    info?: string | React.JSX.Element;
     /**
      * Additional tooltip, attached to an info icon that is displayed after the info.
      */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
     /**
      * Additonal tooltip properties, e.g. `hoverOpenDelay`.
      */
@@ -92,7 +92,7 @@ export const Label = ({
                     (disabled ? ` ${eccgui}-label--disabled` : ""),
                 ...otherLabelProps,
             },
-            labelContent
+            labelContent,
         )
     ) : (
         <></>

package/src/components/List/List.tsx

@@ -20,7 +20,7 @@ export interface ListProps<T> {
 export function List<T>({ items, itemRenderer, itemId, limitOptions, moreLabel = "Show more..." }: ListProps<T>) {
     // The number of items to show in the list, undefined means unlimited
     const [nrOfItemsToShow, setNrOfItemsToShow] = React.useState<number | undefined>(
-        limitOptions?.initialMax ?? undefined
+        limitOptions?.initialMax ?? undefined,
     );
 
     useEffect(() => {