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

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/Iframe/iframe.scss

@@ -1,5 +1,13 @@
 .#{eccgui}-iframe iframe {
     width: 100%;
+    color-scheme: light dark;
+
+    .#{eccgui}-palette--light & {
+        color-scheme: light;
+    }
+    .#{eccgui}-palette--dark & {
+        color-scheme: dark;
+    }
 }
 
 // provide calc value to remove header + card title + white space from viewport height

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

package/src/components/Menu/MenuItem.tsx

@@ -10,7 +10,8 @@ import Tooltip from "../Tooltip/Tooltip";
 import { TestIconProps } from "./../Icon/TestIcon";
 
 export interface MenuItemProps
-    extends Omit<BlueprintMenuItemProps, "icon" | "children">,
+    extends
+        Omit<BlueprintMenuItemProps, "icon" | "children">,
         Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "onFocus" | "target" | "children"> {
     /*
      * If set the icon is diplayed on the left side of the menu item.
@@ -23,7 +24,7 @@ export interface MenuItemProps
     /**
      * Tooltip, but only added to the label, not to the full menu item.
      */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
 }
 
 /**

package/src/components/Menu/Stories/MenuItem.stories.tsx

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

package/src/components/Menu/menu.scss

@@ -36,6 +36,7 @@ $menu-background-color: transparent !default;
 }
 
 .#{$ns}-menu-header {
+    padding-left: unset;
     margin-right: unset;
     margin-left: unset;
 }