@eccenca/gui-elements 24.0.0-rc.4 → 24.0.0-rc.5

package/src/components/OverviewItem/overviewitem.scss

@@ -46,11 +46,19 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 .#{$eccgui}-overviewitem__item {
     display: flex;
     flex-flow: row nowrap;
-    align-content: stretch;
+    place-content: stretch flex-start;
     align-items: stretch;
-    justify-content: flex-start;
     max-width: 100%;
-    height: mini-units(6);
+    height: auto;
+
+    // TODO: we may revalidate later again
+    // @see http://localhost:6006/?path=/docs/components-application--docs as testcase
+    // there is a weird bug in Firefox v132+
+    // with a fixed height the calculation of `asprect-ratio` for child elements seems to be broken in some situations (especially in combination with top/bottom `padding`)
+    // however, it is working when we set min- and max-height (what leads basically to the same layout like a fixed height)
+    // height: mini-units(6);
+    min-height: mini-units(6);
+    max-height: mini-units(6);
 
     &[tabindex]:not([tabindex="-1"]) {
         cursor: pointer;
@@ -70,7 +78,10 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
 .#{$eccgui}-overviewitem__item--highdensity,
 .#{$eccgui}-overviewitem__list--highdensity > li > .#{$eccgui}-overviewitem__item {
-    height: $button-height; // mini-units(4);
+    // same fix for Firefox v132+ like for the normal element height
+    // height: $button-height; // mini-units(4);
+    min-height: $button-height;
+    max-height: $button-height;
 
     & > .#{$eccgui}-overviewitem__depiction {
         width: $button-height; // mini-units(4);
@@ -107,9 +118,10 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
     & > * {
         display: block;
-        width: auto;
+        max-width: 100%;
         max-height: 100%;
         margin: 0 auto;
+        object-fit: contain;
     }
 
     &:not(.#{$eccgui}-overviewitem__depiction--keepcolors) {
@@ -127,9 +139,8 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     flex-direction: column;
     flex-grow: 1;
     flex-shrink: 1;
-    align-content: stretch;
+    place-content: stretch flex-start;
     align-items: stretch;
-    justify-content: flex-start;
     overflow: hidden;
 
     .#{$eccgui}-overviewitem__depiction + & {

package/src/components/OverviewItem/stories/OverviewItem.stories.tsx

@@ -13,7 +13,7 @@ import {
 } from "./../../../../index";
 import { FullExample as OtherDepictionExample } from "./../../Depiction/stories/Depiction.stories";
 import { Default as ActionsExample } from "./OverviewItemActions.stories";
-import { Default as DepictionExample } from "./OverviewItemDepiction.stories";
+import { AutoTransform as DepictionExample } from "./OverviewItemDepiction.stories";
 import { Default as DescriptionExample } from "./OverviewItemDescription.stories";
 
 export default {

package/src/components/OverviewItem/stories/OverviewItemDepiction.stories.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Depiction, Icon, OverviewItemDepiction } from "./../../../../index";
+import png16to9 from "../../Depiction/stories/test-16to9.png";
+
+import { Depiction, Icon, OverviewItem, OverviewItemDepiction } from "./../../../../index";
 import { FullExample as DepictionExample } from "./../../Depiction/stories/Depiction.stories";
 
 export default {
@@ -17,11 +19,24 @@ export default {
 } as Meta<typeof OverviewItemDepiction>;
 
 const Template: StoryFn<typeof OverviewItemDepiction> = (args) => (
-    <OverviewItemDepiction {...args}></OverviewItemDepiction>
+    <OverviewItem>
+        <OverviewItemDepiction {...args}></OverviewItemDepiction>
+    </OverviewItem>
 );
 
-export const Default = Template.bind({});
-Default.args = {
+/**
+ * If a `<Depiction/>` is used as only content then it is returned directly by `<OverviewItemDepiction/>`.
+ */
+export const UseDepictionElement = Template.bind({});
+UseDepictionElement.args = {
+    children: <Depiction {...DepictionExample.args} resizing="contain" />,
+};
+
+/**
+ * If an `<Icon/>` (or `<TestIcon/>`) is used as only content for `<OverviewItemDepiction/>` then it returns automatically a `<Depiction/>` element setting the `image` property to that icon.
+ */
+export const AutoTransform = Template.bind({});
+AutoTransform.args = {
     children: (
         <>
             <Icon name="artefact-dataset" />
@@ -29,7 +44,10 @@ Default.args = {
     ),
 };
 
-export const UseDepictionElement = Template.bind({});
-UseDepictionElement.args = {
-    children: <Depiction {...DepictionExample.args} resizing="contain" />,
+/**
+ * For all other content the `<OverviewItemDepiction/>` wrapper is set around it to keep it in the allowed size. This works mainly for image content.
+ */
+export const Default = Template.bind({});
+Default.args = {
+    children: <img src={png16to9} />,
 };

package/src/components/Tooltip/Tooltip.tsx

@@ -20,7 +20,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      */
     size?: "small" | "medium" | "large";
     /**
-     * The tolltip will be attached to this element when it is hovered.
+     * The tooltip will be attached to this element when it is hovered.
      */
     children: React.ReactNode | React.ReactNode[];
     /**

package/src/components/Typography/HtmlContentBlock.tsx

@@ -7,17 +7,29 @@ import * as TypographyClassNames from "./classnames";
 // FIXME: CMEM-3742: comment + add story
 
 export interface HtmlContentBlockProps extends React.HTMLAttributes<HTMLDivElement> {
-    className?: string;
+    /**
+     * Content block uses smaller font size.
+     */
     small?: boolean;
+    /**
+     * To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line.
+     */
+    linebreakForced?: boolean;
+    /**
+     * No automatic line breaks are inserted.
+     */
+    linebreakPrevented?: boolean;
+    /**
+     * Sub elements like code blocks are displayed without own scrollbars.
+     * This option may infer with `linebreakForced` and `linebreakPrevented`.
+     */
+    noScrollbarsOnChildren?: boolean;
     /** currently not supported */
     large?: boolean;
     /** currently not supported */
     muted?: boolean;
     /** currently not supported */
     disabled?: boolean;
-    linebreakForced?: boolean;
-    linebreakPrevented?: boolean;
-    noScrollbarsOnChildren?: boolean;
 }
 
 export const HtmlContentBlock = ({

package/src/components/Typography/stories/HtmlContentBlock.stories.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import LoremIpsum, { loremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { HtmlContentBlock } from "../../../index";
+
+const whiteSpaceSizeOptions = {
+    control: "select",
+    options: {
+        "not set": undefined,
+        tiny: "tiny",
+        small: "small",
+        regular: "regular",
+        large: "large",
+        xlarge: "xlarge",
+    },
+};
+
+export default {
+    title: "Components/Typography/HtmlContentBlock",
+    component: HtmlContentBlock,
+    argTypes: {
+        children: { control: false },
+    },
+} as Meta<typeof HtmlContentBlock>;
+
+const Template: StoryFn<typeof HtmlContentBlock> = (args) => <HtmlContentBlock {...args} />;
+
+const testContent = (
+    <>
+        <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+        <p>
+            <strong>
+                {loremIpsum({
+                    p: 2,
+                    avgSentencesPerParagraph: 4,
+                    random: false,
+                })
+                    .toString()
+                    .replaceAll(" ", "")}
+            </strong>
+        </p>
+        <LoremIpsum p={3} avgSentencesPerParagraph={5} random={false} />
+    </>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: testContent,
+};

package/src/components/Typography/stories/WhiteSpaceContainer.stories.tsx

@@ -1,26 +1,23 @@
 import React from "react";
-import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { WhiteSpaceContainer as WhiteSpaceContainerElement } from "../../../index";
+import { WhiteSpaceContainer } from "../../../index";
+
+import { Default as HtmlContentBlockStrory } from "./HtmlContentBlock.stories";
 
 const whiteSpaceSizeOptions = {
-    control: "select",
-    options: {
+    control: { type: "select" },
+    options: ["not set", "tiny", "small", "regular", "large", "xlarge"],
+    mapping: {
         "not set": undefined,
-        tiny: "tiny",
-        small: "small",
-        regular: "regular",
-        large: "large",
-        xlarge: "xlarge",
     },
 };
 
 export default {
-    title: "Components/Typography",
-    component: WhiteSpaceContainerElement,
+    title: "Components/Typography/WhiteSpaceContainer",
+    component: WhiteSpaceContainer,
     argTypes: {
-        children: { control: "none" },
+        children: { control: false },
         marginTop: { ...whiteSpaceSizeOptions },
         marginRight: { ...whiteSpaceSizeOptions },
         marginBottom: { ...whiteSpaceSizeOptions },
@@ -30,27 +27,15 @@ export default {
         paddingBottom: { ...whiteSpaceSizeOptions },
         paddingLeft: { ...whiteSpaceSizeOptions },
     },
-} as Meta<typeof WhiteSpaceContainerElement>;
+} as Meta<typeof WhiteSpaceContainer>;
 
-const Template: StoryFn<typeof WhiteSpaceContainerElement> = (args) => (
-    <WhiteSpaceContainerElement {...args} style={{ background: "#eee" }} />
+const Template: StoryFn<typeof WhiteSpaceContainer> = (args) => (
+    <WhiteSpaceContainer {...args} style={{ background: "#eee" }} />
 );
 
-const testContent = loremIpsum({
-    p: 2,
-    avgSentencesPerParagraph: 4,
-    random: false,
-}).toString();
-
-export const WhiteSpaceContainer = Template.bind({});
-WhiteSpaceContainer.args = {
-    children: [
-        <p>{testContent}</p>,
-        <p>
-            <strong>{testContent.replaceAll(" ", "")}</strong>
-        </p>,
-        <p>{testContent}</p>,
-    ],
+export const Default = Template.bind({});
+Default.args = {
+    children: HtmlContentBlockStrory.args.children,
     paddingTop: "tiny",
     paddingRight: "small",
     paddingBottom: "regular",

package/src/extensions/react-flow/handles/HandleContent.tsx

@@ -26,7 +26,7 @@ export const HandleContent = memo(
             <></>
         );
 
-        if (extendedTooltip && tooltipProps?.isOpen) {
+        if (extendedTooltip) {
             return (
                 <Tooltip
                     content={extendedTooltip}

package/src/extensions/react-flow/handles/HandleDefault.tsx

@@ -1,6 +1,7 @@
 import React, { memo } from "react";
 import { Handle as HandleLegacy, HandleProps as ReactFlowHandleLegacyProps } from "react-flow-renderer";
 import { Handle as HandleNext, HandleProps as ReactFlowHandleNextProps } from "react-flow-renderer-lts";
+import { Classes as BlueprintClasses } from "@blueprintjs/core";
 
 import { intentClassName, IntentTypes } from "../../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
@@ -44,34 +45,11 @@ export const HandleDefault = memo(
         const flowVersionCheck = flowVersion || evaluateFlowVersion;
         const handleDefaultRef = React.useRef<any>();
         const [extendedTooltipDisplayed, setExtendedTooltipDisplayed] = React.useState<boolean>(false);
-        const [handleToolsDisplayed, setHandleToolsDisplayed] = React.useState<boolean>(false);
 
-        const routeClickToTools = React.useCallback(
-            (e: Event) => {
-                const toolsTarget = handleDefaultRef.current.getElementsByClassName(
-                    `${eccgui}-graphviz__handletools-target`
-                );
-                if (toolsTarget.length > 0 && e.target === handleDefaultRef.current) {
-                    setHandleToolsDisplayed(true);
-                    setExtendedTooltipDisplayed(false);
-                }
-            },
-            [handleDefaultRef]
-        );
-
-        React.useEffect(() => {
-            const toolsTarget = handleDefaultRef.current.getElementsByClassName(
-                `${eccgui}-graphviz__handletools-target`
-            );
-            if (toolsTarget && toolsTarget[0] && handleToolsDisplayed) {
-                toolsTarget[0].click();
-            }
-        }, [handleToolsDisplayed]);
+        let toolsTarget: HTMLElement[];
 
         React.useEffect(() => {
-            const toolsTarget = handleDefaultRef.current.getElementsByClassName(
-                `${eccgui}-graphviz__handletools-target`
-            );
+            toolsTarget = handleDefaultRef.current.getElementsByClassName(`${eccgui}-graphviz__handletools-target`);
             if (toolsTarget && toolsTarget[0]) {
                 // Polyfill for FF that does not support the `:has()` pseudo selector until at least version 119 or 120
                 // need to be re-evaluated then
@@ -97,7 +75,7 @@ export const HandleDefault = memo(
             },
             intent: intent,
             className: `${eccgui}-graphviz__handle__tooltip-target`,
-            isOpen: extendedTooltipDisplayed && !handleToolsDisplayed,
+            isOpen: extendedTooltipDisplayed,
         };
 
         const handleContentProps = {
@@ -111,6 +89,8 @@ export const HandleDefault = memo(
         const handleContent = <HandleContent {...handleContentProps}>{children}</HandleContent>;
 
         let switchTooltipTimerOn: ReturnType<typeof setTimeout>;
+        let switchToolsTimerOff: ReturnType<typeof setTimeout>;
+
         const handleConfig = {
             ...handleProps,
             ...tooltipTitle,
@@ -119,18 +99,26 @@ export const HandleDefault = memo(
                 if (handleProps.onClick) {
                     handleProps.onClick(e);
                 }
-                routeClickToTools(e);
+                if (toolsTarget.length > 0 && e.target === handleDefaultRef.current) {
+                    setExtendedTooltipDisplayed(false);
+                    toolsTarget[0].click();
+                }
             },
             "data-category": category,
-            onMouseEnter: () => {
-                switchTooltipTimerOn = setTimeout(
-                    () => setExtendedTooltipDisplayed(true),
-                    data?.tooltipProps?.hoverOpenDelay ?? 500
-                );
-                setHandleToolsDisplayed(false);
+            onMouseEnter: (e: any) => {
+                if (switchToolsTimerOff) clearTimeout(switchToolsTimerOff);
+                if (e.target === handleDefaultRef.current) {
+                    switchTooltipTimerOn = setTimeout(
+                        () => setExtendedTooltipDisplayed(true),
+                        data?.tooltipProps?.hoverOpenDelay ?? 500
+                    );
+                }
             },
             onMouseLeave: () => {
                 if (switchTooltipTimerOn) clearTimeout(switchTooltipTimerOn);
+                if (toolsTarget.length > 0 && toolsTarget[0].classList.contains(BlueprintClasses.POPOVER_OPEN)) {
+                    switchToolsTimerOff = setTimeout(() => toolsTarget[0].click(), 500);
+                }
                 setExtendedTooltipDisplayed(false);
             },
         };

package/src/extensions/react-flow/handles/HandleTools.tsx

@@ -18,8 +18,9 @@ export const HandleTools = ({ children, ...otherContextOverlayProps }: HandleToo
     const configToolsDisplayed = toolsDisplayed
         ? {
               defaultIsOpen: true,
-              autoFocus: true,
-              interactionKind: BlueprintPopoverInteractionKind.HOVER,
+              autoFocus: false,
+              interactionKind: BlueprintPopoverInteractionKind.CLICK,
+              openOnTargetFocus: true,
               onClosing: () => setToolsDisplayed(false),
           }
         : {
@@ -38,7 +39,7 @@ export const HandleTools = ({ children, ...otherContextOverlayProps }: HandleToo
             popoverClassName={`${eccgui}-graphviz__handletools-overlay`}
         >
             <div
-                className={`${eccgui}-graphviz__handletools-target`}
+                className={`${eccgui}-graphviz__handletools-placeholder`}
                 data-test-id={otherContextOverlayProps["data-test-id"]}
                 data-testid={otherContextOverlayProps["data-testid"]}
             />

package/src/extensions/react-flow/handles/_handles.scss

@@ -230,7 +230,8 @@ div.react-flow__handle-bottom {
     }
 }
 
-.#{$eccgui}-graphviz__handletools-target {
+.#{$eccgui}-graphviz__handletools-target,
+.#{$eccgui}-graphviz__handletools-placeholder {
     position: absolute;
     top: 0;
     left: 0;

package/src/extensions/react-flow/handles/stories/HandleDefault.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Elements, ReactFlowProvider } from "react-flow-renderer";
+import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { Definitions } from "../../../../common/Intent";
@@ -63,15 +64,17 @@ const HandleDefaultExample = (args: any) => {
     );
 
     return (
-        <ReactFlowProvider>
-            <ReactFlow
-                elements={elements}
-                style={{ height: "400px" }}
-                onLoad={onLoad}
-                edgeTypes={edgeTypes}
-                defaultZoom={1}
-            />
-        </ReactFlowProvider>
+        <OverlaysProvider>
+            <ReactFlowProvider>
+                <ReactFlow
+                    elements={elements}
+                    style={{ height: "400px" }}
+                    onLoad={onLoad}
+                    edgeTypes={edgeTypes}
+                    defaultZoom={1}
+                />
+            </ReactFlowProvider>
+        </OverlaysProvider>
     );
 };