@eccenca/gui-elements 24.2.0-rc.1 → 24.2.0

package/src/components/OverviewItem/OverviewItemActions.tsx

@@ -7,6 +7,18 @@ export interface OverviewItemActionsProps extends React.HTMLAttributes<HTMLDivEl
      * Display it only when the parent `OverviewItem` is hovered or focused.
      */
     hiddenInteractions?: boolean;
+    /**
+     * Delay the rendering of the children by a time in milliseconds.
+     * Could be used to prevent browser freezes for the initial `OverviewItem` rendering.
+     * In general, it is better to fix the cause, i.e. action elements that are expensive to initialize/render should be
+     * optimized or replaced etc. This workaround only prevents the browser from getting blocked completely and does NOT
+     * solve the actual performance issue.
+     */
+    delayDisplayChildren?: number;
+    /**
+     * Display element while the rendering of the actual children is delayed.
+     */
+    delaySkeleton?: JSX.Element;
 }
 
 /**
@@ -17,8 +29,19 @@ export const OverviewItemActions = ({
     children,
     className = "",
     hiddenInteractions = false,
+    delayDisplayChildren = 0,
+    delaySkeleton = <></>,
     ...restProps
 }: OverviewItemActionsProps) => {
+    const [showActions, setShowActions] = React.useState(!(delayDisplayChildren > 0));
+
+    React.useEffect(() => {
+        // Delay rendering of item actions when they are hidden anyways, because rendering interaction elements like context menus currently has a large performance impact.
+        if (!showActions && delayDisplayChildren > 0) {
+            setTimeout(() => setShowActions(true), delayDisplayChildren);
+        }
+    }, []);
+
     return (
         <div
             {...restProps}
@@ -28,7 +51,7 @@ export const OverviewItemActions = ({
                 (className ? ` ${className}` : "")
             }
         >
-            {children}
+            {showActions ? children : delaySkeleton}
         </div>
     );
 };

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

@@ -12,7 +12,7 @@ export default {
     },
     argTypes: {
         children: {
-            control: "none",
+            control: false,
             description: "Should contain only `OverviewItem` elements, maybe wrapped inside cards.",
         },
     },
@@ -26,10 +26,5 @@ ItemList.args = {
     hasDivider: true,
     densityHigh: false,
     columns: 1,
-    children: [
-        <OverviewItem {...ItemExample.args} />,
-        <OverviewItem {...ItemExample.args} />,
-        <OverviewItem {...ItemExample.args} />,
-        <OverviewItem {...ItemExample.args} />,
-    ],
+    children: Array(4).fill(<OverviewItem {...ItemExample.args} />),
 };

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

@@ -0,0 +1,174 @@
+import React from "react";
+import { loremIpsum } from "react-lorem-ipsum";
+
+import {
+    ApplicationContainer,
+    Button,
+    ContextMenu,
+    Depiction,
+    Icon,
+    IconButton,
+    OverflowText,
+    OverviewItem,
+    OverviewItemActions,
+    OverviewItemDescription,
+    OverviewItemLine,
+    OverviewItemList,
+    Spinner,
+    Tooltip,
+} from "./../../../../index";
+import { Default as ContextMenuExample } from "./../../ContextOverlay/ContextMenu.stories";
+import canonicalIcons, { ValidIconName } from "./../../Icon/canonicalIconNames";
+
+interface OverviewItemListPerformanceProps {
+    /** list length */
+    length: number;
+    /** include `OverviewItem` elements in list */
+    useOverviewitem: boolean;
+    /** include depiction */
+    withDepiction: boolean;
+    /** include description */
+    withDescription: boolean;
+    /** include icon button in hidden actions */
+    withIconButtonInHiddenActions: boolean;
+    /** include button in actions */
+    withButtonInActions: boolean;
+    /** inlcude context menu in actions */
+    withContextMenuInActions: boolean;
+    /** include tooltips on all elments that can have one */
+    withTooltips: boolean;
+    /** delay rendering of action items */
+    delayActions: number;
+}
+
+const createTextArray = (items: number, length: number) => {
+    return loremIpsum({
+        p: 1,
+        avgWordsPerSentence: length,
+        avgSentencesPerParagraph: items,
+        startWithLoremIpsum: false,
+        random: false,
+    })[0].split(". ");
+};
+
+const textShort = createTextArray(100, 3);
+const textLong = createTextArray(100, 25);
+
+export const OverviewItemListPerformance = ({
+    length = 500,
+    useOverviewitem = false,
+    withDepiction = false,
+    withDescription = true,
+    withButtonInActions = false,
+    withIconButtonInHiddenActions = false,
+    withTooltips = false,
+    withContextMenuInActions = false,
+    delayActions = 1,
+}: OverviewItemListPerformanceProps) => {
+    const renderStart = new Date();
+    const containerRef = React.useRef(null);
+    const observerRef = React.useRef<MutationObserver | undefined>(undefined);
+
+    const iconNames = Object.keys(canonicalIcons);
+
+    const ItemWrapper = useOverviewitem ? OverviewItem : "div";
+    const ItemDescription = useOverviewitem ? OverviewItemDescription : "div";
+    const ItemLine = useOverviewitem ? OverviewItemLine : "div";
+    const ItemActions = useOverviewitem ? OverviewItemActions : "span";
+
+    const actionsProps = useOverviewitem
+        ? { delayDisplayChildren: delayActions, delaySkeleton: <Spinner position="inline" size="tiny" /> }
+        : {};
+    const hiddenActionsProps = useOverviewitem ? { ...actionsProps, hiddenInteractions: true } : {};
+
+    React.useEffect(() => {
+        const renderEnd = new Date();
+        // eslint-disable-next-line no-console
+        console.log(
+            "OverviewItemListPerformance Rendering time (s)",
+            (renderEnd.getTime() - renderStart.getTime()) / 1000
+        );
+
+        if (containerRef.current) {
+            let changeCount = 0;
+            const changeReporter = () => {
+                const renderChange = new Date();
+                // eslint-disable-next-line no-console
+                console.log(
+                    `Change ${++changeCount} after time (s)`,
+                    (renderChange.getTime() - renderEnd.getTime()) / 1000
+                );
+            };
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+            observerRef.current = new MutationObserver(changeReporter);
+            observerRef.current.observe(containerRef.current, { childList: true, subtree: true });
+        }
+    });
+
+    return (
+        <div ref={containerRef}>
+            <ApplicationContainer>
+                <OverviewItemList hasDivider hasSpacing columns={useOverviewitem ? 2 : 1}>
+                    {Array(length)
+                        .fill("x")
+                        .map((_, id) => {
+                            return (
+                                <ItemWrapper key={id}>
+                                    {withDepiction && (
+                                        <Depiction
+                                            size="small"
+                                            image={<Icon name={iconNames[id % iconNames.length] as ValidIconName} />}
+                                            caption={withTooltips ? textShort[(id + 10) % textShort.length] : undefined}
+                                            captionPosition={withTooltips ? "tooltip" : "none"}
+                                        />
+                                    )}
+                                    {withDescription && (
+                                        <ItemDescription>
+                                            <ItemLine large={useOverviewitem ? true : undefined}>
+                                                {textShort[id % textShort.length]}
+                                            </ItemLine>
+                                            <ItemLine small={useOverviewitem ? true : undefined}>
+                                                {withTooltips ? (
+                                                    <Tooltip content={textLong[id % textLong.length]}>
+                                                        <OverflowText>{textLong[id % textLong.length]}</OverflowText>
+                                                    </Tooltip>
+                                                ) : (
+                                                    <OverflowText>{textLong[id % textLong.length]}</OverflowText>
+                                                )}
+                                            </ItemLine>
+                                        </ItemDescription>
+                                    )}
+                                    {withIconButtonInHiddenActions && (
+                                        <ItemActions {...hiddenActionsProps}>
+                                            <IconButton
+                                                name={iconNames[(id + 23) % iconNames.length] as ValidIconName}
+                                                text={textShort[(id + 27) % textShort.length]}
+                                                tooltipAsTitle={!withTooltips}
+                                            />
+                                        </ItemActions>
+                                    )}
+                                    {(withButtonInActions || withContextMenuInActions) && (
+                                        <ItemActions {...actionsProps}>
+                                            {withButtonInActions && (
+                                                <Button onClick={() => alert("Button clicked")}>
+                                                    {textShort[(id + 77) % textShort.length]}
+                                                </Button>
+                                            )}
+                                            {withContextMenuInActions && (
+                                                <ContextMenu
+                                                    {...ContextMenuExample.args}
+                                                    tooltipAsTitle={!withTooltips}
+                                                />
+                                            )}
+                                        </ItemActions>
+                                    )}
+                                </ItemWrapper>
+                            );
+                        })}
+                </OverviewItemList>
+            </ApplicationContainer>
+        </div>
+    );
+};

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { OverviewItemListPerformance } from "./OverviewItemListPerformance";
+
+export default {
+    title: "Components/OverviewItem",
+    component: OverviewItemListPerformance,
+    argTypes: {},
+} as Meta<typeof OverviewItemListPerformance>;
+
+const Template: StoryFn<typeof OverviewItemListPerformance> = (args) => (
+    <OverviewItemListPerformance {...args}></OverviewItemListPerformance>
+);
+
+export const ListPerformance = Template.bind({});
+ListPerformance.args = {
+    useOverviewitem: true,
+};

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>