@eccenca/gui-elements 24.1.0-rc.6 → 24.2.0-featuresupportprojectvariableautocompletioncmem5572.0

package/src/components/Spinner/Spinner.tsx

@@ -11,14 +11,19 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 type SpinnerPosition = "local" | "inline" | "global";
 type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit";
 type SpinnerStroke = "thin" | "medium" | "bold";
-type Intent = "inherit" | "primary" | "success" | "warning" | "danger";
+type Intent = "inherit" | "primary" | "success" | "warning" | "danger" | "none";
 
 /** A spinner that is either displayed globally or locally. */
-export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size"> {
+export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "intent"> {
     /**
      * intent value or a valid css color definition
+     * @deprecated (v25) it will allow in the future only a color value string and that for other states the intent property needs to be used
      */
     color?: Intent | string;
+    /**
+     * Intent state of the field item.
+     */
+    intent?: Intent;
     /**
      * Additional CSS class names.
      */
@@ -66,12 +71,14 @@ export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size"> {
 export const Spinner = ({
     className = "",
     color = "inherit",
+    intent,
     position = "local",
     size,
     stroke,
     showLocalBackdrop = false,
     delay = 0,
     overlayProps,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     description = "Loading indicator", // currently unsupported (FIXME):
     ...otherProps
 }: SpinnerProps) => {
@@ -91,8 +98,9 @@ export const Spinner = ({
     };
 
     const spinnerElement = position === "inline" ? "span" : "div";
-    const spinnerColor = availableIntent.indexOf(color) < 0 ? color : null;
-    const spinnerIntent = availableIntent.indexOf(color) < 0 ? "usercolor" : color;
+
+    const spinnerColor = !intent && availableIntent.indexOf(color) < 0 ? color : null;
+    const spinnerIntent = !intent && availableIntent.indexOf(color) < 0 ? "usercolor" : intent || color;
 
     let spinnerSize;
     let spinnerStroke;
@@ -130,7 +138,7 @@ export const Spinner = ({
         />
     );
 
-    if (spinnerColor) {
+    if (spinnerColor && spinnerIntent === "usercolor") {
         spinner = <span style={{ color: spinnerColor }}>{spinner}</span>;
     }
 

package/src/components/Spinner/Stories/spinner.stories.tsx

@@ -1,12 +1,17 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../../.storybook/helpers";
 import Spinner from "../Spinner";
 export default {
     title: "Components/Spinner",
     component: Spinner,
     argTypes: {
-        color: { control: "radio", options: ["inherit", "primary", "success", "warning", "danger"] },
+        color: { control: "color" },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "primary", "success", "warning", "danger", "none"],
+        },
         position: { control: "radio", options: ["local", "inline", "global"] },
         size: { control: "radio", options: ["tiny", "small", "medium", "large", "xlarge", "inherit"] },
         stroke: { control: "radio", options: ["thin", "medium", "bold"] },

package/src/components/Table/TableContainer.tsx

@@ -11,7 +11,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { TableRowHeightSize, tableRowHeightSizes } from "./Table";
 
-interface TableDataContainerProps
+export interface TableDataContainerProps
     extends Omit<
             CarbonDataTableProps<
                 Array<Omit<CarbonDataTableRow<Array<CarbonDataTableHeader>>, "cells">>,
@@ -23,7 +23,7 @@ interface TableDataContainerProps
     children(signature: any): JSX.Element;
     size?: TableRowHeightSize;
 }
-interface TableSimpleContainerProps
+export interface TableSimpleContainerProps
     extends Omit<CarbonTableContainerProps, "description" | "stickyHeader" | "title" | "useStaticWidth">,
         React.HTMLAttributes<HTMLDivElement> {
     children?: JSX.Element;

package/src/components/Table/TableExpandRow.tsx

@@ -11,7 +11,7 @@ import { TableCell } from "./index";
 // workaround to get type/interface
 type CarbonTableExpandRowProps = React.ComponentProps<typeof CarbonTableExpandRow>;
 export interface TableExpandRowProps
-    extends Omit<CarbonTableExpandRowProps, "ref" | "ariaLabel" | "expandIconDescription" | "aria-label">,
+    extends Omit<CarbonTableExpandRowProps, "children" | "ref" | "ariaLabel" | "expandIconDescription" | "aria-label">,
         React.HTMLAttributes<HTMLTableRowElement> {
     /**
      * This text is displayed as tooltip for the button that toggles the expanded/collapsed state.

package/src/components/Table/index.tsx

@@ -7,3 +7,4 @@ export * from "./TableCell";
 
 // TODO, we may wrap to add own classes (currently not necessary)
 export { TableHead, TableBody, TableExpandedRow, TableHeader } from "@carbon/react";
+export type { TableHeadProps, TableBodyProps, TableExpandedRowProps, TableHeaderProps, DataTableRenderProps } from "@carbon/react";

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -11,9 +11,10 @@ export default {
     argTypes: {},
 } as Meta<typeof Tooltip>;
 
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
 const Template: StoryFn<typeof Tooltip> = (args) => (
     <OverlaysProvider>
-        <Tooltip {...args} />
+        <Tooltip {...args} key={++forcedUpdateKey} />
     </OverlaysProvider>
 );
 
@@ -30,7 +31,7 @@ const testContent = loremIpsum({
  * */
 export const Default = Template.bind({});
 Default.args = {
-    children: <span>hover me</span>,
+    children: "hover me",
     content: testContent,
     addIndicator: true,
 };

package/src/components/Tooltip/Tooltip.tsx

@@ -3,6 +3,7 @@ import {
     Classes as BlueprintClasses,
     Tooltip as BlueprintTooltip,
     TooltipProps as BlueprintTooltipProps,
+    Utils as BlueprintUtils,
 } from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -33,6 +34,14 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      * Set properties for the Markdown parser
      */
     markdownProps?: Omit<MarkdownProps, "children">;
+    /**
+     * Use the overlay target as placeholder before the real `<Tooltip /` is rendered on first hover or focus event.
+     * This can boost performance massive but it is currently experimental.
+     * Placeholders are never used when `disabled`, `defaultIsOpen` or `isOpen` is set to `true`, or if `renderTarget` is set.
+     * If the tooltip `content` is only a string then a placeholder is automatically used, too.
+     * You can prevent it in any case by setting it to `false`.
+     */
+    usePlaceholder?: boolean;
 }
 
 export const Tooltip = ({
@@ -43,8 +52,106 @@ export const Tooltip = ({
     addIndicator = false,
     markdownEnabler = "\n\n",
     markdownProps,
-    ...otherProps
+    usePlaceholder,
+    hoverOpenDelay = 500,
+    ...otherTooltipProps
 }: TooltipProps) => {
+    const placeholderRef = React.useRef(null);
+    const eventMemory = React.useRef<null | "afterhover" | "afterfocus">(null);
+    const searchId = React.useRef<null | string>(null);
+    const swapDelayTime = 100;
+    const [placeholder, setPlaceholder] = React.useState<boolean>(
+        !otherTooltipProps.disabled &&
+            !otherTooltipProps.defaultIsOpen &&
+            !otherTooltipProps.isOpen &&
+            otherTooltipProps.renderTarget === undefined &&
+            hoverOpenDelay > swapDelayTime &&
+            (usePlaceholder === true || (typeof content === "string" && usePlaceholder !== false))
+    );
+
+    const targetClassName =
+        `${eccgui}-tooltip__wrapper` +
+        (className ? " " + className : "") +
+        (addIndicator === true ? " " + BlueprintClasses.TOOLTIP_INDICATOR : "");
+
+    React.useEffect(() => {
+        if (placeholderRef.current !== null) {
+            const swap = (ev: MouseEvent | globalThis.FocusEvent) => {
+                const swapDelay = setTimeout(() => {
+                    // we delay the swap to prevent unwanted effects
+                    // (e.g. forced mouseover after the swap but the cursor is already somewhere else)
+                    eventMemory.current = ev.type === "focusin" ? "afterfocus" : "afterhover";
+                    searchId.current = Date.now().toString(16) + Math.random().toString(16).slice(2);
+                    setPlaceholder(false);
+                }, swapDelayTime);
+                if (placeholderRef.current !== null) {
+                    const eventType = ev.type === "focusin" ? "focusout" : "mouseleave";
+                    (placeholderRef.current as HTMLElement).addEventListener(
+                        eventType,
+                        () => {
+                            if (eventType === "focusout" && eventMemory.current === "afterfocus" ||
+                                eventType === "mouseleave" && eventMemory.current === "afterhover") {
+                                eventMemory.current = null
+                            }
+                            clearTimeout(swapDelay)
+                        }
+                    );
+                }
+            };
+            (placeholderRef.current as HTMLElement).addEventListener("mouseenter", swap);
+            (placeholderRef.current as HTMLElement).addEventListener("focusin", swap);
+            return () => {
+                if (placeholderRef.current) {
+                    (placeholderRef.current as HTMLElement).removeEventListener("mouseenter", swap);
+                    (placeholderRef.current as HTMLElement).removeEventListener("focusin", swap);
+                }
+            };
+        }
+        return () => {};
+    }, [!!placeholderRef.current]);
+
+    const refocus = React.useCallback((node) => {
+        if (eventMemory.current && node) {
+            // we do not have a `targetRef` here, so we need to workaround it
+            // const target = node.targetRef.current.children[0];
+            const target = document.body.querySelector(
+                `[data-postplaceholder=id${eventMemory.current}${searchId.current}]`
+            )?.children[0];
+            if (target) {
+                switch (eventMemory.current) {
+                    case "afterfocus":
+                        (target as HTMLElement).focus();
+                        break;
+                    case "afterhover":
+                        (target as HTMLElement).dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
+                        break;
+                }
+            }
+        }
+    }, []);
+
+    const displayPlaceholder = () => {
+        const PlaceholderElement = otherTooltipProps?.targetTagName ?? (otherTooltipProps?.fill ? "div" : "span");
+        const childTarget = BlueprintUtils.ensureElement(React.Children.toArray(children)[0]);
+        if (!childTarget) {
+            return null;
+        }
+        return React.createElement(
+            PlaceholderElement,
+            {
+                ...otherTooltipProps?.targetProps,
+                className: `${BlueprintClasses.POPOVER_TARGET} ${targetClassName} ${eccgui}-tooltip__wrapper--placeholder`,
+                ref: placeholderRef,
+            },
+            React.cloneElement(childTarget, {
+                ...childTarget.props,
+                className:
+                    childTarget.props.className ?? "" + (otherTooltipProps.fill ? ` ${BlueprintClasses.FILL}` : ""),
+                tabIndex: 0,
+            })
+        );
+    };
+
     let tooltipContent = content;
 
     if (
@@ -55,23 +162,27 @@ export const Tooltip = ({
         tooltipContent = <Markdown {...markdownProps}>{content}</Markdown>;
     }
 
-    return (
+    return placeholder ? (
+        displayPlaceholder()
+    ) : (
         <BlueprintTooltip
             lazy={true}
-            hoverOpenDelay={500}
-            {...otherProps}
+            hoverOpenDelay={hoverOpenDelay - swapDelayTime}
+            {...otherTooltipProps}
             content={tooltipContent}
-            className={
-                `${eccgui}-tooltip__wrapper` +
-                (className ? " " + className : "") +
-                (addIndicator === true ? " " + BlueprintClasses.TOOLTIP_INDICATOR : "")
-            }
-            //targetClassName={`${eccgui}-tooltip__target` + (className ? " " + className + "__target" : "")}
+            className={targetClassName}
             popoverClassName={
                 `${eccgui}-tooltip__content` +
                 ` ${eccgui}-tooltip--${size}` +
                 (className ? " " + className + "__content" : "")
             }
+            ref={refocus}
+            targetProps={
+                {
+                    ...otherTooltipProps.targetProps,
+                    "data-postplaceholder": `id${eventMemory.current}${searchId.current}`,
+                } as React.HTMLProps<HTMLElement>
+            }
         >
             {children}
         </BlueprintTooltip>

package/src/extensions/react-flow/nodes/NodeContent.tsx

@@ -390,15 +390,19 @@ export function NodeContent<CONTENT_PROPS = any>({
         flowVersionCheck === "legacy" ? ([] as NodeContentHandleLegacyProps[]) : ([] as NodeContentHandleNextProps[]);
 
     const saveOriginalSize = () => {
+        const currentClassNames = nodeContentRef.current.classList;
+        if (currentClassNames.contains("was-resized") && !width && !height) {
+            currentClassNames.remove("was-resized");
+        }
         originalSize.current.width = nodeContentRef.current.offsetWidth as number;
         originalSize.current.height = nodeContentRef.current.offsetHeight as number;
     }
 
     React.useEffect(() => {
-        if(nodeContentRef.current && !(originalSize.current.width || originalSize.current.height)) {
+        if(nodeContentRef.current && (!(originalSize.current.width || originalSize.current.height) || !(width || height))) {
             saveOriginalSize();
         }
-    }, [!!nodeContentRef.current, !(originalSize.current.width || originalSize.current.height)])
+    }, [!!nodeContentRef.current, !(originalSize.current.width || originalSize.current.height), !(width || height)])
 
     // Update width and height when node dimensions parameters has changed
     React.useEffect(() => {
@@ -406,15 +410,11 @@ export function NodeContent<CONTENT_PROPS = any>({
         const updateHeight = nodeDimensions?.height ? validateHeight(nodeDimensions?.height) : undefined;
         setWidth(updateWidth);
         setHeight(updateHeight);
-        if (!nodeDimensions?.width && !nodeDimensions?.height) {
-            // provoke new measuring if no dimensions are set
-            saveOriginalSize();
-        }
     }, [nodeDimensions]);
 
     const isResizingActive = React.useCallback((): boolean => {
         const currentClassNames = nodeContentRef.current.classList;
-        return resizeDirections.right === currentClassNames.contains("is-resizable-horizontal") &&
+        return resizeDirections.right === currentClassNames.contains("is-resizable-horizontal") ||
             resizeDirections.bottom === currentClassNames.contains("is-resizable-vertical");
     }, [])
 
@@ -439,17 +439,17 @@ export function NodeContent<CONTENT_PROPS = any>({
 
         if (isResizable && !resizingActive) {
             if (currentClassNames.contains("is-resizable-horizontal")) {
-                nodeContentRef.current.classList.remove("is-resizable-horizontal");
+                currentClassNames.remove("is-resizable-horizontal");
             }
             if (currentClassNames.contains("is-resizable-vertical")) {
-                nodeContentRef.current.classList.remove("is-resizable-vertical");
+                currentClassNames.remove("is-resizable-vertical");
             }
-
+            
             if (resizeDirections.right) {
-                nodeContentRef.current.classList.add("is-resizable-horizontal");
+                currentClassNames.add("is-resizable-horizontal");
             }
             if (resizeDirections.bottom) {
-                nodeContentRef.current.classList.add("is-resizable-vertical");
+                currentClassNames.add("is-resizable-vertical");
             }
         }
     }); // need to be done everytime a property is changed and the element is re-rendered, otherwise the resizing class is lost
@@ -524,8 +524,8 @@ export function NodeContent<CONTENT_PROPS = any>({
             ? {
                   width,
                   height,
-                  maxWidth: resizeMaxDimensions?.width ?? undefined,
-                  maxHeight: resizeMaxDimensions?.height ?? undefined,
+                  maxWidth: resizeDirections.right ? resizeMaxDimensions?.width ?? undefined : undefined,
+                  maxHeight: resizeDirections.bottom ? resizeMaxDimensions?.height ?? undefined : undefined,
               }
             : {};
 
@@ -705,6 +705,10 @@ export function NodeContent<CONTENT_PROPS = any>({
                         const nextHeight = resizeDirections.bottom
                             ? (height ?? originalSize.current.height ?? 0) + d.height
                             : undefined;
+                        if (nextWidth || nextHeight) {
+                            const currentClassNames = nodeContentRef.current.classList;
+                            currentClassNames.add("was-resized");
+                        }
                         if (nextWidth) {
                             nodeContentRef.current.style.width = `${nextWidth}px`;
                         }

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -50,7 +50,7 @@
         box-shadow: 0 0 0 6 * $reactflow-node-border-width rgba($reactflow-edge-stroke-color-selected, 0.05);
     }
 
-    &.is-resizable-vertical {
+    &.was-resized.is-resizable-vertical {
         max-height: unset;
     }
 }

package/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx

@@ -103,11 +103,12 @@ export default {
         },
         intent: {
             control: "select",
-            options: { "Not set": undefined, ...Definitions },
+            options: [ undefined, ...Object.values(Definitions) ],
         },
         highlightColor: {
             control: "select",
-            options: {
+            options: [ "Not set", "Default", "Alternate", "Default + alternate", "Custom (red)", "Default + Custom (red)", "Custom (green) + alternate", "Custom (purple) + custom (yellow)"],
+            mapping: {
                 "Not set": undefined,
                 Default: "default",
                 Alternate: "alternate",
@@ -118,8 +119,8 @@ export default {
                 "Custom (purple) + custom (yellow)": ["purple", "yellow"],
             },
         },
-        content: { control: "none" },
-        footerContent: { control: "none" },
+        content: { control: false },
+        footerContent: { control: false },
         isConnectable: { table: { disable: true } },
         targetPosition: { table: { disable: true } },
         sourcePosition: { table: { disable: true } },
@@ -128,17 +129,52 @@ export default {
     },
 } as Meta<typeof NodeContent>;
 
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
 const NodeContentExample = (args: any) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
     const [elements, setElements] = useState([] as Elements);
 
+    const defaultElement = {
+        id: "example-1",
+        type: "default",
+        data: args,
+        position: { x: 50, y: 50 },
+    };
+
     useEffect(() => {
+        const sizeReset = {}
+        if (args.resizeMaxDimensions && args.resizeDirections) {
+            sizeReset["onNodeResize"] = (dimensions) => {
+                // eslint-disable-next-line no-console
+                console.log("call onNodeResize method")
+                if (args.onNodeResize) {
+                    args.onNodeResize(dimensions);
+                }
+                if (dimensions?.width || dimensions?.height) {
+                    sizeReset["menuButtons"] = <IconButton name="item-reset" onClick={() => {
+                        // eslint-disable-next-line no-console
+                        console.log("reset size");
+                        setElements([
+                            {
+                                ...defaultElement,
+                                data: {...defaultElement.data, ...sizeReset, ...{ nodeDimensions: {} }},
+                            },
+                        ] as Elements);
+
+                    }}/>;
+                }
+                setElements([
+                    {
+                        ...defaultElement,
+                        data: {...defaultElement.data, ...sizeReset, ...{ nodeDimensions: dimensions }},
+                    },
+                ] as Elements);
+            }
+        }
         setElements([
             {
-                id: "example-1",
-                type: "default",
-                data: args,
-                position: { x: 50, y: 50 },
+                ...defaultElement,
+                data: {...defaultElement.data, ...sizeReset},
             },
         ] as Elements);
     }, [args]);
@@ -165,7 +201,7 @@ const NodeContentExample = (args: any) => {
     );
 };
 
-const Template: StoryFn<typeof NodeContent> = (args) => <NodeContentExample {...args} /*some comment*/ />;
+const Template: StoryFn<typeof NodeContent> = (args) => <NodeContentExample {...args} /*some comment*/  key={++forcedUpdateKey} />;
 
 export const Default = Template.bind({});
 Default.args = {