@eccenca/gui-elements 25.0.0 → 25.1.0-changeupgradedtoreact18cmem6639.0

package/src/components/MultiSelect/MultiSelect.tsx

@@ -10,17 +10,30 @@ import { removeExtraSpaces } from "../../common/utils/stringUtils";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 
-import { ContextOverlayProps, Highlighter, IconButton, MenuItem, OverflowText, Spinner } from "./../../index";
+import {
+    ContextOverlayProps,
+    Highlighter,
+    highlighterUtils,
+    IconButton,
+    MenuItem,
+    OverflowText,
+    Spinner,
+} from "./../../index";
 
 export interface MultiSuggestFieldSelectionProps<T> {
     newlySelected?: T;
+    newlyRemoved?: T;
     selectedItems: T[];
     createdItems: Partial<T>[];
 }
 
-interface MultiSuggestFieldCommonProps<T>
+export interface MultiSuggestFieldCommonProps<T>
     extends TestableComponent,
-        Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
+        Pick<
+            BlueprintMultiSelectProps<T>,
+            "items" | "placeholder" | "openOnKeyDown" | "noResults" | "createNewItemRenderer"
+        >,
+        Partial<Pick<BlueprintMultiSelectProps<T>, "itemRenderer">> {
     /**
      * Additional class name, space separated.
      */
@@ -53,7 +66,7 @@ interface MultiSuggestFieldCommonProps<T>
     /**
      * prop to listen for query changes, when text is entered in the multi-select input
      */
-    runOnQueryChange?: (query: string) => Promise<T[] | undefined>;
+    runOnQueryChange?: (query: string) => Promise<T[] | undefined> | (T[] | undefined);
     /**
      * Whether the component should take up the full width of its container.
      * This overrides `tagInputProps.fill`.
@@ -70,9 +83,11 @@ interface MultiSuggestFieldCommonProps<T>
      */
     newItemCreationText?: string;
     /**
-     * Allows to creates new item from a given query. If this is not provided then no new items can be created.
+     * Allows to create new item from a given query. If this is not provided then no new items can be created.
      */
     createNewItemFromQuery?: (query: string) => T;
+    /** Validates if a new item can be created from the current query string. */
+    isValidNewOption?: (query: string) => boolean;
     /**
      * Items that were newly created and not taken from the list will be post-fixed with this string.
      */
@@ -103,9 +118,20 @@ interface MultiSuggestFieldCommonProps<T>
     wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
     /**
      * Function that allows us to filter values from the option list.
-     * If not provided, values are filtered by their labels
+     *
+     * @deprecated (v26) use `searchListPredicate` instead.
      */
     searchPredicate?: (item: T, query: string) => boolean;
+
+    /**
+     * Returns the filtered the search option list.
+     * By default, a case-insensitive multi-word filtering is applied.
+     *
+     * @param items The options.
+     * @param query The search query.
+     */
+    searchListPredicate?: (items: T[], query: string) => T[];
+
     /**
      * Limits the height of the input target plus its dropdown menu when it is opened.
      * Need to be a `number not greater than 100` (as `vh`, a unit describing a length relative to the viewport height) or `true` (equals 100).
@@ -159,6 +185,7 @@ export function MultiSuggestField<T>({
     newItemPostfix = " (new item)",
     disabled,
     createNewItemFromQuery,
+    isValidNewOption,
     requestDelay = 0,
     clearQueryOnSelection = false,
     className,
@@ -166,13 +193,16 @@ export function MultiSuggestField<T>({
     "data-testid": dataTestid,
     wrapperProps,
     searchPredicate,
+    searchListPredicate,
     limitHeightOpened,
     intent,
     ...otherMultiSelectProps
 }: MultiSuggestFieldProps<T>) {
+    type SelectionChange = { type: "selected"; item: T } | { type: "removed"; item: T } | { type: "none" };
+
     // Options created by a user
     const createdItems = useRef<T[]>([]);
-    // Options passed ouside (f.e. from the backend)
+    // Options passed outside (f.e. from the backend)
     const [externalItems, setExternalItems] = React.useState<T[]>([...items]);
     // All options (created and passed) that match the query
     const [filteredItems, setFilteredItems] = React.useState<T[]>([]);
@@ -183,14 +213,15 @@ export function MultiSuggestField<T>({
     // Max height of the menu
     const [calculatedMaxHeight, setCalculatedMaxHeight] = React.useState<string | null>(null);
 
-    //currently focused element in popover list
-    const [focusedItem, setFocusedItem] = React.useState<T | null>(null);
+    // The active popover item is only needed for keyboard interaction and should not trigger rerenders.
+    const focusedItemRef = React.useRef<T | null>(null);
     const [showSpinner, setShowSpinner] = React.useState(false);
     const inputRef = React.useRef<HTMLInputElement>(null);
     const requestState = useRef<{
         query?: string;
         timeoutId?: number;
     }>({});
+    const selectionChange = useRef<SelectionChange>({ type: "none" });
 
     /** Update external items when they change
      *  e.g for auto-complete when query change
@@ -201,11 +232,21 @@ export function MultiSuggestField<T>({
     }, [items.map((item) => itemId(item)).join("|")]);
 
     React.useEffect(() => {
-        onSelection?.({
-            newlySelected: selectedItems.slice(-1)[0],
+        const selectionParams: MultiSuggestFieldSelectionProps<T> = {
             createdItems: createdItems.current,
             selectedItems,
-        });
+        };
+
+        if (selectionChange.current.type === "selected") {
+            selectionParams.newlySelected = selectionChange.current.item;
+        }
+
+        if (selectionChange.current.type === "removed") {
+            selectionParams.newlyRemoved = selectionChange.current.item;
+        }
+
+        onSelection?.(selectionParams);
+        selectionChange.current = { type: "none" };
     }, [
         onSelection,
         selectedItems.map((item) => itemId(item)).join("|"),
@@ -220,6 +261,7 @@ export function MultiSuggestField<T>({
             return;
         }
 
+        selectionChange.current = { type: "none" };
         setSelectedItems(externalSelectedItems);
     }, [externalSelectedItems?.map((item) => itemId(item)).join("|")]);
 
@@ -260,12 +302,22 @@ export function MultiSuggestField<T>({
      * @param matcher
      */
     const removeItemSelection = (matcher: string) => {
-        const filteredItems = selectedItems.filter((item) => itemId(item) !== matcher);
-        setSelectedItems(filteredItems);
+        setSelectedItems((items) => {
+            const removedItem = items.find((item) => itemId(item) === matcher);
+
+            selectionChange.current = removedItem ? { type: "removed", item: removedItem } : { type: "none" };
+
+            return items.filter((item) => itemId(item) !== matcher);
+        });
     };
 
-    const defaultFilterPredicate = (item: T, query: string) => {
-        return itemLabel(item).toLowerCase().includes(query);
+    /** Does a case-insensitive multi-word search in the item label. */
+    const defaultSearchListPredicate = (items: T[], query: string): T[] => {
+        const searchWords = highlighterUtils.extractSearchWords(query, true);
+        return items.filter((item) => {
+            const searchIn = itemLabel(item).toLowerCase();
+            return highlighterUtils.matchesAllWords(searchIn, searchWords);
+        });
     };
 
     /**
@@ -277,6 +329,7 @@ export function MultiSuggestField<T>({
         if (itemHasBeenSelectedAlready(itemId(item))) {
             removeItemSelection(itemId(item));
         } else {
+            selectionChange.current = { type: "selected", item };
             setSelectedItems((items) => [...items, item]);
         }
 
@@ -293,24 +346,28 @@ export function MultiSuggestField<T>({
      * @param query
      */
     const onQueryChange = (query: string) => {
-        setFilteredItems([]);
         if (query.length && query !== requestState.current.query) {
             requestState.current.query = query;
             if (requestState.current.timeoutId) {
                 clearTimeout(requestState.current.timeoutId);
             }
+            setShowSpinner(true);
+            setFilteredItems([]);
             const fn = async () => {
-                setShowSpinner(true);
-                setFilteredItems([]);
                 const resultFromQuery = runOnQueryChange && (await runOnQueryChange(removeExtraSpaces(query)));
                 if (requestState.current.query === query) {
                     // Only use most recent request
                     const outsideOptions = [...(resultFromQuery ?? externalItems)];
-                    const filter = searchPredicate ?? defaultFilterPredicate;
-
-                    setFilteredItems(
-                        [...outsideOptions, ...createdItems.current].filter((item) => filter(item, query.toLowerCase()))
-                    );
+                    let itemFilter = defaultSearchListPredicate;
+                    if (searchListPredicate) {
+                        itemFilter = searchListPredicate;
+                    } else if (searchPredicate) {
+                        itemFilter = (items, query) => {
+                            return items.filter((item) => searchPredicate(item, query));
+                        };
+                    }
+
+                    setFilteredItems(itemFilter([...outsideOptions, ...createdItems.current], query));
                     setShowSpinner(false);
                 }
             };
@@ -356,6 +413,7 @@ export function MultiSuggestField<T>({
     const handleClear = () => {
         requestState.current.query = "";
 
+        selectionChange.current = { type: "none" };
         setSelectedItems([]);
         setFilteredItems([...externalItems, ...createdItems.current]);
     };
@@ -366,7 +424,13 @@ export function MultiSuggestField<T>({
      * @param index
      */
     const removeTagFromSelectionViaIndex = (_label: React.ReactNode, index: number) => {
-        setSelectedItems([...selectedItems.slice(0, index), ...selectedItems.slice(index + 1)]);
+        setSelectedItems((items) => {
+            const removedItem = items[index];
+
+            selectionChange.current = removedItem ? { type: "removed", item: removedItem } : { type: "none" };
+
+            return [...items.slice(0, index), ...items.slice(index + 1)];
+        });
     };
 
     /**
@@ -387,7 +451,9 @@ export function MultiSuggestField<T>({
      */
     const handleOnKeyUp = (event: React.KeyboardEvent<HTMLElement>) => {
         if (event.key === "Enter" && !filteredItems.length && !!requestState.current.query && createNewItemFromQuery) {
-            createNewItem(requestState.current.query);
+            if (!isValidNewOption || isValidNewOption(requestState.current.query)) {
+                createNewItem(requestState.current.query);
+            }
         }
         inputRef.current?.focus();
     };
@@ -400,10 +466,14 @@ export function MultiSuggestField<T>({
     const handleOnKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
         if (event.key === "Tab" && !!requestState.current.query) {
             event.preventDefault();
-            if (focusedItem) {
-                onItemSelect(focusedItem);
+            if (focusedItemRef.current) {
+                onItemSelect(focusedItemRef.current);
             } else {
-                onItemSelect(createNewItem(requestState.current.query));
+                if (!isValidNewOption || isValidNewOption(requestState.current.query)) {
+                    onItemSelect(createNewItem(requestState.current.query));
+                } else {
+                    return;
+                }
             }
             requestState.current.query = "";
             setTimeout(() => inputRef.current?.focus());
@@ -418,7 +488,7 @@ export function MultiSuggestField<T>({
      * @returns
      */
     const newItemRenderer = (label: string, active: boolean, handleClick: React.MouseEventHandler<HTMLElement>) => {
-        if (!createNewItemFromQuery) return undefined;
+        if (!createNewItemFromQuery || (isValidNewOption && !isValidNewOption(label))) return undefined;
         const clickHandler = (e: React.MouseEvent<HTMLElement>) => {
             createNewItem(label);
             handleClick(e);
@@ -460,7 +530,6 @@ export function MultiSuggestField<T>({
                     ? "Search for item, or enter term to create new one..."
                     : undefined
             }
-            {...otherMultiSelectProps}
             query={requestState.current.query}
             onQueryChange={onQueryChange}
             items={filteredItems}
@@ -471,7 +540,9 @@ export function MultiSuggestField<T>({
             noResults={<MenuItem disabled={true} text={noResultText} />}
             tagRenderer={(item) => itemLabel(item)}
             createNewItemRenderer={newItemRenderer}
-            onActiveItemChange={(activeItem) => setFocusedItem(activeItem)}
+            onActiveItemChange={(activeItem) => {
+                focusedItemRef.current = activeItem;
+            }}
             fill={fullWidth}
             createNewItemFromQuery={createNewItemFromQuery}
             disabled={disabled}
@@ -529,6 +600,7 @@ export function MultiSuggestField<T>({
                         : undefined,
                 } as BlueprintMultiSelectProps<T>["popoverContentProps"]
             }
+            {...otherMultiSelectProps}
         />
     );
 

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

@@ -5,6 +5,8 @@ import { Meta, StoryFn } from "@storybook/react";
 import { fn } from "@storybook/test";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
+import { Notification } from "../Notification/Notification";
+import Spacing from "../Separation/Spacing";
 
 import { MultiSuggestField, MultiSuggestFieldSelectionProps, SimpleDialog } from "./../../../index";
 
@@ -61,7 +63,7 @@ Default.args = {
 
 /**
  * Display always the dropdown after the element was clicked on.
- * Do not wait until the query input was startet.
+ * Do not wait until the query input was started.
  */
 export const dropdownOnFocus = Template.bind({});
 dropdownOnFocus.args = {
@@ -259,3 +261,40 @@ CustomSearch.args = {
         return item.testId.toLowerCase().includes(query) || item.testLabel.toLowerCase().includes(query);
     },
 };
+
+const SelectionNotificationComponent = (): React.JSX.Element => {
+    const [notification, setNotification] = useState<string | null>(null);
+
+    const availableItems = useMemo<string[]>(() => ["existing item"], []);
+
+    const identity = useCallback((item: string): string => item, []);
+
+    const handleOnSelect = useCallback((params: MultiSuggestFieldSelectionProps<string>) => {
+        if (params.newlySelected) {
+            setNotification(`Element added: ${params.newlySelected}`);
+        } else if (params.newlyRemoved) {
+            setNotification(`Element removed: ${params.newlyRemoved}`);
+        }
+    }, []);
+
+    return (
+        <OverlaysProvider>
+            {notification && <Notification intent={"info"}>{notification}</Notification>}
+            <Spacing size={"medium"} />
+            <MultiSuggestField<string>
+                items={availableItems}
+                prePopulateWithItems={true}
+                onSelection={handleOnSelect}
+                itemId={identity}
+                itemLabel={identity}
+                createNewItemFromQuery={identity}
+            />
+        </OverlaysProvider>
+    );
+};
+
+/**
+ * Demonstrates the `newlySelected` and `newlyRemoved` properties of the `onSelection` callback.
+ * A notification appears when an element is added or removed from the selection.
+ */
+export const selectionNotification = SelectionNotificationComponent.bind({});

package/src/components/MultiSuggestField/_multisuggestfield.scss

@@ -6,3 +6,21 @@
         max-height: var(--eccgui-multisuggestfield-max-height, 45vh);
     }
 }
+
+.#{$eccgui}-multisuggestfield {
+    --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
+
+    &.#{$ns}-intent-success {
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-success-text};
+    }
+    &.#{$ns}-intent-warning {
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-warning-text};
+    }
+    &.#{$ns}-intent-danger {
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-danger-text};
+    }
+
+    &:focus-within {
+        @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
+    }
+}

package/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React from "react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
@@ -13,39 +13,6 @@ const items = new Array(50).fill(undefined).map((_, id) => {
     return { testLabel, testId: `${testLabel}-id` };
 });
 
-export const TestComponent = (): JSX.Element => {
-    const copy: Array<{ testLabel: string; testId: string }> = [items[2]];
-
-    const [selected, setSelected] = useState(copy);
-
-    const handleOnSelect = useCallback((params) => {
-        const items = params.selectedItems;
-        setSelected(items);
-    }, []);
-
-    const handleReset = (): void => {
-        setSelected(copy);
-    };
-
-    return (
-        <div>
-            <button data-testid="reset-button" onClick={handleReset}>
-                Reset
-            </button>
-            <br />
-            <br />
-            <MultiSuggestField<{ testLabel: string; testId: string }>
-                items={items}
-                createNewItemFromQuery={(query) => ({ testId: `${query}-id`, testLabel: query })}
-                onSelection={handleOnSelect}
-                itemId={({ testId }) => testId}
-                itemLabel={({ testLabel }) => testLabel}
-                selectedItems={selected}
-            />
-        </div>
-    );
-};
-
 describe("MultiSuggestField", () => {
     describe("uncontrolled (when only selectedItems or onSelect is provided)", () => {
         it("should render default input", () => {
@@ -261,6 +228,86 @@ describe("MultiSuggestField", () => {
             });
         });
 
+        it("should set newlySelected only when an item is added", async () => {
+            const onSelection = jest.fn();
+            const initiallySelected = predefinedNotControlledValues.args.selectedItems;
+
+            const { container } = render(
+                <MultiSuggestField
+                    {...dropdownOnFocus.args}
+                    items={items}
+                    selectedItems={initiallySelected}
+                    onSelection={onSelection}
+                />
+            );
+
+            await waitFor(() => {
+                expect(onSelection).toHaveBeenCalledWith({
+                    createdItems: [],
+                    selectedItems: initiallySelected,
+                });
+            });
+
+            onSelection.mockClear();
+
+            const [inputContainer] = container.getElementsByClassName("eccgui-multiselect");
+            const [input] = inputContainer.getElementsByTagName("input");
+
+            fireEvent.click(input);
+
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+
+                expect(menuItems.length).toBe(dropdownOnFocus.args.items.length);
+
+                fireEvent.click(menuItems[2]);
+            });
+
+            await waitFor(() => {
+                expect(onSelection).toHaveBeenLastCalledWith({
+                    createdItems: [],
+                    newlySelected: items[2],
+                    selectedItems: [...initiallySelected, items[2]],
+                });
+            });
+        });
+
+        it("should set newlyRemoved only when an item is removed", async () => {
+            const onSelection = jest.fn();
+            const initiallySelected = predefinedNotControlledValues.args.selectedItems;
+
+            const { container } = render(
+                <MultiSuggestField
+                    {...predefinedNotControlledValues.args}
+                    selectedItems={initiallySelected}
+                    onSelection={onSelection}
+                />
+            );
+
+            await waitFor(() => {
+                expect(onSelection).toHaveBeenCalledWith({
+                    createdItems: [],
+                    selectedItems: initiallySelected,
+                });
+            });
+
+            onSelection.mockClear();
+
+            const [firstTag] = Array.from(container.querySelectorAll("span[data-tag-index]"));
+            const removeTagButton = firstTag.querySelector("button");
+
+            fireEvent.click(removeTagButton!);
+
+            await waitFor(() => {
+                expect(onSelection).toHaveBeenLastCalledWith({
+                    createdItems: [],
+                    newlyRemoved: initiallySelected[0],
+                    selectedItems: initiallySelected.slice(1),
+                });
+            });
+        });
+
         it("should filter items by custom search function", async () => {
             const { container } = render(<MultiSuggestField {...CustomSearch.args} items={items} />);
 
@@ -340,6 +387,13 @@ describe("MultiSuggestField", () => {
                 expect(getByText(firstSelected)).toBeInTheDocument();
                 expect(getByText(secondSelected)).toBeInTheDocument();
             });
+
+            await waitFor(() => {
+                expect(onSelection).toHaveBeenCalledWith({
+                    createdItems: [],
+                    selectedItems: predefinedNotControlledValues.args.selectedItems,
+                });
+            });
         });
 
         it("should call onSelection function with the selected items", async () => {
@@ -485,7 +539,6 @@ describe("MultiSuggestField", () => {
             await waitFor(() => {
                 const expectedObject = {
                     createdItems: [],
-                    newlySelected: items.at(-1),
                     selectedItems: items,
                 };
                 expect(onSelection).toHaveBeenCalledWith(expectedObject);
@@ -513,7 +566,6 @@ describe("MultiSuggestField", () => {
             await waitFor(() => {
                 const expectedObject = {
                     createdItems: [],
-                    newlySelected: items.at(-1),
                     selectedItems: items,
                 };
                 expect(onSelection).toHaveBeenCalledWith(expectedObject);
@@ -536,7 +588,7 @@ describe("MultiSuggestField", () => {
 
                     const expectedObject = {
                         createdItems: [],
-                        newlySelected: selected.at(-1),
+                        newlyRemoved: items[i],
                         selectedItems: selected,
                     };
 

package/src/components/NotAvailable/NotAvailable.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { NotAvailable } from "../../../index";
+
+export default {
+    title: "Components/NotAvailable",
+    component: NotAvailable,
+    argTypes: {},
+} as Meta<typeof NotAvailable>;
+
+const TemplateFull: StoryFn<typeof NotAvailable> = (args) => <NotAvailable {...args} />;
+
+export const Default = TemplateFull.bind({});
+Default.args = {};

package/src/components/NotAvailable/NotAvailable.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+
+import { CLASSPREFIX as eccgui, Tag, TagProps, Tooltip, TooltipProps } from "../../index";
+import { TestableComponent } from "../interfaces";
+export interface NotAvailableProps
+    extends TestableComponent,
+        Pick<TagProps, "icon" | "className">,
+        Pick<TooltipProps, "intent"> {
+    /**
+     * Text displayed by the element.
+     */
+    label?: TagProps["children"];
+    /**
+     * Add a tooltip to the element.
+     * You need to set an empty string `""` to remove it.
+     */
+    tooltip?: TooltipProps["content"];
+    /**
+     * Specify the display of the used `Tag` component.
+     */
+    tagProps?: Omit<TagProps, "icon" | "intent" | "children">;
+    /**
+     * Specify the display of the used `Tooltip` component.
+     */
+    tooltipProps?: Omit<TooltipProps, "content" | "intent" | "children">;
+    /**
+     * Do not use the `Tag` component for the display.
+     * The `intent` state can be displayed only on the tooltip then.
+     */
+    noTag?: boolean;
+}
+
+/**
+ * Simple placeholder element that can be used to display info about missing data.
+ */
+export const NotAvailable = ({
+    label = "n/a",
+    tooltip = "not available",
+    icon,
+    intent,
+    tagProps,
+    tooltipProps,
+    className,
+    noTag = false,
+    ...otherProps
+}: NotAvailableProps) => {
+    const defaultTagProps: TagProps = {
+        icon,
+        intent,
+        emphasis: "weaker",
+        className: `${eccgui}-notavailable` + className ? ` ${className}` : "",
+    };
+    const naElement =
+        noTag === false ? (
+            <Tag {...defaultTagProps} {...tagProps} {...otherProps}>
+                {label ?? "n/a"}
+            </Tag>
+        ) : (
+            <>{label ?? "n/a"}</>
+        );
+    const defaultTooltipProps: TooltipProps = {
+        children: naElement,
+        content: tooltip,
+        intent,
+        addIndicator: noTag,
+    };
+
+    return tooltip ? <Tooltip {...defaultTooltipProps} {...tooltipProps} /> : naElement;
+};
+
+export default NotAvailable;

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

@@ -3,7 +3,8 @@ import { LoremIpsum, loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import { Button, HtmlContentBlock, Markdown, Notification, Spacing } from "../../../index";
+import { Markdown } from "../../cmem";
+import { Button, HtmlContentBlock, Notification, Spacing } from "../../components";
 
 export default {
     title: "Components/Notification",

package/src/components/Notification/Notification.tsx

@@ -20,11 +20,11 @@ export interface NotificationProps
     /**
      * Extra user action elements
      */
-    actions?: JSX.Element | JSX.Element[];
+    actions?: React.JSX.Element | React.JSX.Element[];
     /**
      * Notification message that can be used as alternative to children elements.
      */
-    message?: JSX.Element | string;
+    message?: React.JSX.Element | string;
     /**
      * Intent state of the notification.
      */
@@ -97,7 +97,7 @@ export const Notification = ({
             timeout={timeout ? timeout : 0}
             icon={
                 notificationIcon
-                    ? React.cloneElement(notificationIcon as JSX.Element, {
+                    ? React.cloneElement(notificationIcon as React.JSX.Element, {
                           className: (notificationIcon.props.className ?? "") + ` ${BlueprintClassNames.ICON}`,
                       })
                     : undefined