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

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -40,8 +40,15 @@ export interface ContextMenuProps extends TestableComponent {
      * Props to spread to `ContextOverlay` that is used to display the dropdown.
      */
     contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "children" | "className">>;
-    /** Disables the button to open the menu. */
+    /**
+     * Disables the button to open the menu.
+     */
     disabled?: boolean;
+    /**
+     * We use the target as placeholder before the real `<ContextMenu /` is rendered on first hover or focus event.
+     * In case of problems set this property to `true`.
+     */
+    preventPlaceholder?: boolean;
 }
 
 /**
@@ -58,27 +65,33 @@ export const ContextMenu = ({
     /* FIXME: The Tooltip component can interfere with the opened menu, since it is implemented via portal and may cover the menu,
               so by default we use the title attribute instead of Tooltip. */
     tooltipAsTitle = true,
+    preventPlaceholder = false,
     ...restProps
 }: ContextMenuProps) => {
+    const toggleButton =
+        typeof togglerElement === "string" ? (
+            <IconButton
+                tooltipAsTitle={tooltipAsTitle}
+                name={[togglerElement]}
+                text={togglerText}
+                large={togglerLarge}
+                disabled={!!disabled}
+                data-test-id={restProps["data-test-id"]}
+            />
+        ) : (
+            (togglerElement as ReactElement)
+        );
+
     return (
         <ContextOverlay
             {...restProps}
             {...contextOverlayProps}
             className={`${eccgui}-contextmenu ` + className}
             content={<Menu>{children}</Menu>}
+            disabled={!!disabled}
+            usePlaceholder={!preventPlaceholder}
         >
-            {typeof togglerElement === "string" ? (
-                <IconButton
-                    tooltipAsTitle={tooltipAsTitle}
-                    name={[togglerElement]}
-                    text={togglerText}
-                    large={togglerLarge}
-                    disabled={!!disabled}
-                    data-test-id={restProps["data-test-id"]}
-                />
-            ) : (
-                (togglerElement as ReactElement)
-            )}
+            {toggleButton}
         </ContextOverlay>
     );
 };

package/src/components/ContextOverlay/ContextOverlay.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { Popover as BlueprintPopover, PopoverProps as BlueprintPopoverProps } from "@blueprintjs/core";
+import {
+    Classes as BlueprintClasses,
+    Popover as BlueprintPopover,
+    PopoverProps as BlueprintPopoverProps,
+    Utils as BlueprintUtils,
+} from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
@@ -13,6 +18,11 @@ export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "positi
      * Use it when you need to display modal dialogs out of the context overlay.
      */
     preventTopPosition?: boolean;
+    /**
+     * Use the overlay target as placeholder before the real `<ContextOverlay /` is rendered on first hover or focus event.
+     * Currently experimental.
+     */
+    usePlaceholder?: boolean;
 }
 
 /**
@@ -24,18 +34,86 @@ export const ContextOverlay = ({
     portalClassName,
     preventTopPosition,
     className = "",
-    ...restProps
+    usePlaceholder = false,
+    ...otherPopoverProps
 }: ContextOverlayProps) => {
+    const placeholderRef = React.useRef(null);
+    const eventMemory = React.useRef<undefined | "afterhover" | "afterfocus">(undefined);
+    const [placeholder, setPlaceholder] = React.useState<boolean>(
+        // use placeholder only for "simple" overlays without special states
+        !otherPopoverProps.disabled &&
+            !otherPopoverProps.defaultIsOpen &&
+            !otherPopoverProps.isOpen &&
+            otherPopoverProps.renderTarget === undefined &&
+            usePlaceholder
+    );
+
+    React.useEffect(() => {
+        if (placeholderRef.current) {
+            const swap = (ev: MouseEvent | globalThis.FocusEvent) => {
+                eventMemory.current = ev.type === "focusin" ? "afterfocus" : "afterhover";
+                setPlaceholder(false);
+            };
+            (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 === "afterfocus" && node) {
+            const target = node.targetRef.current.children[0];
+            if (target) {
+                target.focus();
+            }
+        }
+    }, []);
+
+    const targetClassName = `${eccgui}-contextoverlay` + (className ? ` ${className}` : "");
+
+    const displayPlaceholder = () => {
+        const PlaceholderElement = otherPopoverProps?.targetTagName ?? (otherPopoverProps?.fill ? "div" : "span");
+        const childTarget = BlueprintUtils.ensureElement(React.Children.toArray(children)[0]);
+        if (!childTarget) {
+            return null;
+        }
+        return React.createElement(
+            PlaceholderElement,
+            {
+                ...otherPopoverProps?.targetProps,
+                className: `${BlueprintClasses.POPOVER_TARGET} ${targetClassName}`,
+                ref: placeholderRef,
+            },
+            React.cloneElement(childTarget, {
+                ...childTarget.props,
+                className:
+                    childTarget.props.className ?? "" + (otherPopoverProps.fill ? ` ${BlueprintClasses.FILL}` : ""),
+                tabIndex:
+                    childTarget.props.tabIndex ??
+                    (!otherPopoverProps?.disabled && otherPopoverProps?.openOnTargetFocus ? 0 : undefined),
+            })
+        );
+    };
+
     const portalClassNameFinal =
         (preventTopPosition ? `${eccgui}-contextoverlay__portal--lowertop` : "") +
         (portalClassName ? ` ${portalClassName}` : "");
 
-    return (
+    return placeholder ? (
+        displayPlaceholder()
+    ) : (
         <BlueprintPopover
             placement="bottom"
-            {...restProps}
-            className={`${eccgui}-contextoverlay` + (className ? ` ${className}` : "")}
+            {...otherPopoverProps}
+            className={targetClassName}
             portalClassName={portalClassNameFinal.trim() ?? undefined}
+            ref={refocus}
         >
             {children}
         </BlueprintPopover>

package/src/components/Form/FieldItem.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ClassNames as IntentClassNames } from "../../common/Intent";
+import { ClassNames as IntentClassNames, IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 import Label, { LabelProps } from "../Label/Label";
@@ -18,23 +18,31 @@ export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, Te
     /**
      * Set primary state.
      * This is not routed through automatically.
+     * @deprecated (v25) use `intent="primary"` instead.
      */
     hasStatePrimary?: boolean;
     /**
      * Set success state.
      * This is not routed through automatically.
+     * @deprecated (v25) use `intent="success"` instead.
      */
     hasStateSuccess?: boolean;
     /**
      * Set warning state.
      * This is not routed through automatically.
+     * @deprecated (v25) use `intent="warning"` instead.
      */
     hasStateWarning?: boolean;
     /**
      * Set danger state.
      * This is not routed through automatically.
+     * @deprecated (v25) use `intent="danger"` instead.
      */
     hasStateDanger?: boolean;
+    /**
+     * Intent state of the field item.
+     */
+    intent?: IntentTypes;
     /**
      * Is disabled.
      * The included inout element nedd to set disabled directly itself.
@@ -71,6 +79,7 @@ export const FieldItem = ({
     labelProps,
     helperText,
     messageText,
+    intent,
     ...otherProps
 }: FieldItemProps) => {
     let classIntent = "";
@@ -91,6 +100,8 @@ export const FieldItem = ({
             break;
     }
 
+    const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
+
     const label = <Label {...labelProps} disabled={disabled} />;
 
     const userhelp =
@@ -106,9 +117,9 @@ export const FieldItem = ({
     const notification =
         messageText &&
         (typeof messageText === "string" ? (
-            <p className={`${eccgui}-fielditem__message` + classIntent}>{messageText}</p>
+            <p className={`${eccgui}-fielditem__message` + (intentClass || classIntent)}>{messageText}</p>
         ) : (
-            <div className={`${eccgui}-fielditem__message` + classIntent}>{messageText}</div>
+            <div className={`${eccgui}-fielditem__message` + (intentClass || classIntent)}>{messageText}</div>
         ));
 
     return (

package/src/components/Form/FieldSet.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ClassNames as IntentClassNames } from "../../common/Intent";
+import { ClassNames as IntentClassNames, IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "title"> {
@@ -11,20 +11,28 @@ export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFie
     boxed?: boolean;
     /**
      * The fieldsetsection is displayed with primary color scheme.
+     * @deprecated (v25) use `intent="primary"` instead.
      */
     hasStatePrimary?: boolean;
     /**
      * The fieldset section is displayed with success (some type of green) color scheme.
+     * @deprecated (v25) use `intent="success"` instead.
      */
     hasStateSuccess?: boolean;
     /**
      * The fieldset section is displayed with warning (some type of orange) color scheme.
+     * @deprecated (v25) use `intent="warning"` instead.
      */
     hasStateWarning?: boolean;
     /**
      * The fieldsetsection is displayed with danger (some type of red) color scheme.
+     * @deprecated (v25) use `intent="danger"` instead.
      */
     hasStateDanger?: boolean;
+    /**
+     * Intent state of the field item.
+     */
+    intent?: IntentTypes;
     /**
      * Optional helper text. If given then it is displayed after the title.
      */
@@ -52,6 +60,7 @@ export const FieldSet = ({
     hasStateSuccess = false,
     hasStateWarning = false,
     hasStateDanger = false,
+    intent,
     helperText,
     messageText,
     title,
@@ -75,6 +84,8 @@ export const FieldSet = ({
             break;
     }
 
+    const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
+
     const userhelp =
         helperText &&
         (typeof helperText === "string" ? (
@@ -98,7 +109,7 @@ export const FieldSet = ({
             className={
                 `${eccgui}-fieldset` +
                 (className ? " " + className : "") +
-                classIntent +
+                (intentClass || classIntent) +
                 (boxed ? ` ${eccgui}-fieldset--boxed` : "")
             }
             {...otherProps}

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

@@ -2,6 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../../.storybook/helpers";
 import { FieldItem, TextField } from "../../../../index";
 
 export default {
@@ -11,6 +12,9 @@ export default {
         children: {
             control: "none",
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
     },
 } as Meta<typeof FieldItem>;
 

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

@@ -2,6 +2,7 @@ import React from "react";
 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 { Default as SimpleFieldItemExample } from "./FieldItem.stories";
@@ -14,6 +15,9 @@ export default {
         children: {
             control: "none",
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
     },
 } as Meta<typeof FieldSet>;
 

package/src/components/Icon/canonicalIconNames.tsx

@@ -129,6 +129,7 @@ const canonicalIcons = {
     "operation-filteredit": icons.FilterEdit,
     "operation-filterremove": icons.FilterRemove,
     "operation-filter": icons.Filter,
+    "operation-focus": icons.CenterSquare,
     "operation-format-codeblock": icons.CodeBlock,
     "operation-format-text-code": icons.Code,
     "operation-format-text-bold": icons.TextBold,

package/src/components/MultiSelect/MultiSelect.tsx

@@ -78,20 +78,28 @@ interface MultiSelectCommonProps<T>
      * Items that were newly created and not taken from the list will be post-fixed with this string.
      */
     newItemPostfix?: string;
+    /**
+     * Intent state of the multi select.
+     */
+    intent?: BlueprintIntent;
     /**
      * The input element is displayed with primary color scheme.
+     * @deprecated (v25) use `intent="primary"` instead.
      */
     hasStatePrimary?: boolean;
     /**
      * The input element is displayed with success (some type of green) color scheme.
+     * @deprecated (v25) use `intent="success"` instead.
      */
     hasStateSuccess?: boolean;
     /**
-     * The input element is displayed with success (some type of orange) color scheme.
+     * The input element is displayed with warning (some type of orange) color scheme.
+     * @deprecated (v25) use `intent="warning"` instead.
      */
     hasStateWarning?: boolean;
     /**
-     * The input element is displayed with success (some type of red) color scheme.
+     * The input element is displayed with danger (some type of red) color scheme.
+     * @deprecated (v25) use `intent="danger"` instead.
      */
     hasStateDanger?: boolean;
     /**
@@ -179,6 +187,7 @@ function MultiSelect<T>({
     wrapperProps,
     searchPredicate,
     limitHeightOpened,
+    intent,
     ...otherMultiSelectProps
 }: MultiSelectProps<T>) {
     // Options created by a user
@@ -203,19 +212,19 @@ function MultiSelect<T>({
         timeoutId?: number;
     }>({});
 
-    let intent;
+    let stateIntent;
     switch (true) {
         case hasStatePrimary:
-            intent = BlueprintIntent.PRIMARY;
+            stateIntent = BlueprintIntent.PRIMARY;
             break;
         case hasStateSuccess:
-            intent = BlueprintIntent.SUCCESS;
+            stateIntent = BlueprintIntent.SUCCESS;
             break;
         case hasStateWarning:
-            intent = BlueprintIntent.WARNING;
+            stateIntent = BlueprintIntent.WARNING;
             break;
         case hasStateDanger:
-            intent = BlueprintIntent.DANGER;
+            stateIntent = BlueprintIntent.DANGER;
             break;
         default:
             break;
@@ -230,12 +239,11 @@ function MultiSelect<T>({
     }, [items.map((item) => itemId(item)).join("|")]);
 
     React.useEffect(() => {
-        onSelection &&
-            onSelection({
-                newlySelected: selectedItems.slice(-1)[0],
-                createdItems: createdItems.current,
-                selectedItems,
-            });
+        onSelection?.({
+            newlySelected: selectedItems.slice(-1)[0],
+            createdItems: createdItems.current,
+            selectedItems,
+        });
     }, [
         onSelection,
         selectedItems.map((item) => itemId(item)).join("|"),
@@ -430,7 +438,11 @@ function MultiSelect<T>({
     const handleOnKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
         if (event.key === "Tab" && !!requestState.current.query) {
             event.preventDefault();
-            focusedItem ? onItemSelect(focusedItem) : onItemSelect(createNewItem(requestState.current.query));
+            if (focusedItem) {
+                onItemSelect(focusedItem);
+            } else {
+                onItemSelect(createNewItem(requestState.current.query));
+            }
             requestState.current.query = "";
             setTimeout(() => inputRef.current?.focus());
         }
@@ -511,7 +523,7 @@ function MultiSelect<T>({
                 className: `${eccgui}-multiselect` + (className ? ` ${className}` : ""),
                 fill: fullWidth,
                 inputRef: inputRef,
-                intent,
+                intent: intent || stateIntent,
                 addOnBlur: true,
                 onKeyDown: handleOnKeyDown,
                 onKeyUp: handleOnKeyUp,

package/src/components/MultiSuggestField/MultiSuggestField.stories.tsx

@@ -4,6 +4,8 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 import { fn } from "@storybook/test";
 
+import { helpersArgTypes } from "../../../.storybook/helpers";
+
 import { MultiSuggestField, MultiSuggestFieldSelectionProps, SimpleDialog } from "./../../../index";
 
 const testLabels = loremIpsum({
@@ -29,6 +31,10 @@ export default {
         items: {
             control: "none",
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "primary", "success", "warning", "danger"],
+        },
     },
     args: {
         onSelection: fn(),

package/src/components/Notification/Notification.stories.tsx

@@ -15,6 +15,10 @@ export default {
         icon: {
             ...helpersArgTypes.exampleIcon,
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "success", "warning", "danger", "neutral", "info"],
+        },
     },
 } as Meta<typeof Notification>;
 

package/src/components/Notification/Notification.tsx

@@ -5,7 +5,7 @@ import {
     ToastProps as BlueprintToastProps,
 } from "@blueprintjs/core";
 
-import { ClassNames as IntentClassNames } from "../../common/Intent";
+import { ClassNames as IntentClassNames, IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 
@@ -25,23 +25,31 @@ export interface NotificationProps
      * Notification message that can be used as alternative to children elements.
      */
     message?: JSX.Element | string;
+    /**
+     * Intent state of the notification.
+     */
+    intent?: Extract<IntentTypes, "neutral" | "success" | "warning" | "danger" | "info">;
     /**
      * Notification has a neutral color scheme.
+     * @deprecated (v25) use `intent="neutral"` instead.
      */
     neutral?: boolean;
     /**
      * Notification is a success info.
      * This defines the colorization and the icon symbol.
+     * @deprecated (v25) use `intent="success"` instead.
      */
     success?: boolean;
     /**
      * Notification is a warning alert.
      * This defines the colorization and the icon symbol.
+     * @deprecated (v25) use `intent="warning"` instead.
      */
     warning?: boolean;
     /**
      * Notification is a danger alert.
      * This defines the colorization and the icon symbol.
+     * @deprecated (v25) use `intent="danger"` instead.
      */
     danger?: boolean;
     /**
@@ -81,6 +89,7 @@ export const Notification = ({
     wrapperProps,
     "data-test-id": dataTestId,
     "data-testid": dataTestid,
+    intent,
     ...otherProps
 }: NotificationProps) => {
     let intentLevel: string = IntentClassNames.INFO;
@@ -103,9 +112,13 @@ export const Notification = ({
             break;
     }
 
+    const intents: Array<NotificationProps["intent"]> = ["info", "success", "warning", "danger"];
+    const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
+    const intentIconSymbol = intents.includes(intent) ? `state-${intent}` : iconSymbol;
+
     let notificationIcon = icon !== false ? icon : undefined;
-    if (icon !== false && !notificationIcon && !!iconSymbol) {
-        notificationIcon = <Icon name={iconSymbol as ValidIconName} />;
+    if (icon !== false && !notificationIcon && !!intentIconSymbol) {
+        notificationIcon = <Icon name={intentIconSymbol as ValidIconName} />;
     }
 
     const content = actions ? (
@@ -123,7 +136,7 @@ export const Notification = ({
         <BlueprintToast
             className={
                 `${eccgui}-notification ` +
-                intentLevel +
+                (intentClass || intentLevel) +
                 (className ? ` ${className}` : "") +
                 (flexWidth ? ` ${eccgui}-notification--flexwidth` : "") +
                 (otherProps.onDismiss ? "" : ` ${eccgui}-notification--static`)

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} />),
 };