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

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

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,
+};