@eccenca/gui-elements 25.1.0-rc.4 → 25.2.0-featureupgradeblueprintjsv6cmem7139.0

package/src/components/Icon/stories/IconButton.stories.tsx

@@ -3,7 +3,7 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { IconButton, TestIcon } from "../../../../index";
+import { IconButton, TestIcon } from "../../../components";
 
 import buttonStory from "./../../Button/Button.stories";
 import canonicalIcons from "./../canonicalIconNames";

package/src/components/Icon/stories/TestIcon.stories.tsx

@@ -3,8 +3,8 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { TestIcon } from "../../../../index";
 import { Definitions } from "../../../common/Intent";
+import { TestIcon } from "../TestIcon";
 
 export default {
     title: "Components/Icon/TestIcon",

package/src/components/Icon/transformIcon.tsx

@@ -1,17 +1,19 @@
 import React from "react";
-import { CarbonIconType, CarbonIconProps } from "@carbon/react/icons";
+import { CarbonIconProps, CarbonIconType } from "@carbon/react/icons";
 
-export const transform = (IconSymbol: CarbonIconType, rotate: number = 0, flipH: boolean = false, flipV: boolean = false) : CarbonIconType => {
-    return React.forwardRef((props: CarbonIconProps, ref: React.ForwardedRef<React.ReactSVGElement>) => {
+export const transform = (
+    IconSymbol: CarbonIconType,
+    rotate: number = 0,
+    flipH: boolean = false,
+    flipV: boolean = false,
+): CarbonIconType => {
+    return React.forwardRef((props: CarbonIconProps, ref: React.LegacyRef<SVGSVGElement>) => {
         return (
             <IconSymbol
                 {...props}
                 ref={ref}
-                transform={
-                    `scale(${flipH ? "-1" : "1"}, ${flipV ? "-1" : "1"}) rotate(${rotate})`
-                }
+                transform={`scale(${flipH ? "-1" : "1"}, ${flipV ? "-1" : "1"}) rotate(${rotate})`}
             />
         );
-    })
-}
-
+    });
+};

package/src/components/Iframe/Iframe.tsx

@@ -42,7 +42,7 @@ export const Iframe = React.forwardRef<HTMLIFrameElement, IframeProps>(
             htmlIframeProps = {},
             ...otherReactProps
         }: IframeProps,
-        ref
+        ref,
     ) => {
         const [isLoaded, setIsLoaded] = useState<boolean>(false);
         const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
@@ -98,7 +98,7 @@ export const Iframe = React.forwardRef<HTMLIFrameElement, IframeProps>(
                 />
             </div>
         );
-    }
+    },
 );
 
 export default Iframe;

package/src/components/Label/Label.tsx

@@ -9,15 +9,15 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
     /**
      * Label text.
      */
-    text?: string | JSX.Element;
+    text?: string | React.JSX.Element;
     /**
      * Short info about label semantic, it is displayed in parentesis after the label text.
      */
-    info?: string | JSX.Element;
+    info?: string | React.JSX.Element;
     /**
      * Additional tooltip, attached to an info icon that is displayed after the info.
      */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
     /**
      * Additonal tooltip properties, e.g. `hoverOpenDelay`.
      */
@@ -92,7 +92,7 @@ export const Label = ({
                     (disabled ? ` ${eccgui}-label--disabled` : ""),
                 ...otherLabelProps,
             },
-            labelContent
+            labelContent,
         )
     ) : (
         <></>

package/src/components/List/List.tsx

@@ -20,7 +20,7 @@ export interface ListProps<T> {
 export function List<T>({ items, itemRenderer, itemId, limitOptions, moreLabel = "Show more..." }: ListProps<T>) {
     // The number of items to show in the list, undefined means unlimited
     const [nrOfItemsToShow, setNrOfItemsToShow] = React.useState<number | undefined>(
-        limitOptions?.initialMax ?? undefined
+        limitOptions?.initialMax ?? undefined,
     );
 
     useEffect(() => {

package/src/components/Menu/MenuItem.tsx

@@ -10,7 +10,8 @@ import Tooltip from "../Tooltip/Tooltip";
 import { TestIconProps } from "./../Icon/TestIcon";
 
 export interface MenuItemProps
-    extends Omit<BlueprintMenuItemProps, "icon" | "children">,
+    extends
+        Omit<BlueprintMenuItemProps, "icon" | "children">,
         Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "onFocus" | "target" | "children"> {
     /*
      * If set the icon is diplayed on the left side of the menu item.
@@ -23,7 +24,7 @@ export interface MenuItemProps
     /**
      * Tooltip, but only added to the label, not to the full menu item.
      */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
 }
 
 /**

package/src/components/Menu/Stories/MenuItem.stories.tsx

@@ -3,7 +3,7 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Menu, MenuItem, TestIcon } from "../../../../index";
+import { Menu, MenuItem, TestIcon } from "../../../components";
 
 import canonicalIcons from "./../../Icon/canonicalIconNames";
 

package/src/components/Menu/menu.scss

@@ -36,6 +36,7 @@ $menu-background-color: transparent !default;
 }
 
 .#{$ns}-menu-header {
+    padding-left: unset;
     margin-right: unset;
     margin-left: unset;
 }

package/src/components/MultiSelect/MultiSelect.tsx

@@ -27,9 +27,14 @@ export interface MultiSuggestFieldSelectionProps<T> {
     createdItems: Partial<T>[];
 }
 
-interface MultiSuggestFieldCommonProps<T>
-    extends TestableComponent,
-        Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
+export interface MultiSuggestFieldCommonProps<T>
+    extends
+        TestableComponent,
+        Pick<
+            BlueprintMultiSelectProps<T>,
+            "items" | "placeholder" | "openOnKeyDown" | "noResults" | "createNewItemRenderer"
+        >,
+        Partial<Pick<BlueprintMultiSelectProps<T>, "itemRenderer">> {
     /**
      * Additional class name, space separated.
      */
@@ -79,9 +84,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.
      */
@@ -112,9 +119,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 (v27) 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).
@@ -168,6 +186,7 @@ export function MultiSuggestField<T>({
     newItemPostfix = " (new item)",
     disabled,
     createNewItemFromQuery,
+    isValidNewOption,
     requestDelay = 0,
     clearQueryOnSelection = false,
     className,
@@ -175,6 +194,7 @@ export function MultiSuggestField<T>({
     "data-testid": dataTestid,
     wrapperProps,
     searchPredicate,
+    searchListPredicate,
     limitHeightOpened,
     intent,
     ...otherMultiSelectProps
@@ -183,19 +203,19 @@ export function MultiSuggestField<T>({
 
     // 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[]>([]);
     // All options (created and passed) selected by a user
     const [selectedItems, setSelectedItems] = React.useState<T[]>(() =>
-        prePopulateWithItems ? [...items] : externalSelectedItems ? [...externalSelectedItems] : []
+        prePopulateWithItems ? [...items] : externalSelectedItems ? [...externalSelectedItems] : [],
     );
     // 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<{
@@ -292,9 +312,13 @@ export function MultiSuggestField<T>({
         });
     };
 
-    const defaultFilterPredicate = (item: T, query: string) => {
+    /** 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 highlighterUtils.matchesAllWords(itemLabel(item).toLowerCase(), searchWords);
+        return items.filter((item) => {
+            const searchIn = itemLabel(item).toLowerCase();
+            return highlighterUtils.matchesAllWords(searchIn, searchWords);
+        });
     };
 
     /**
@@ -323,24 +347,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);
                 }
             };
@@ -424,7 +452,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();
     };
@@ -437,10 +467,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());
@@ -455,7 +489,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);
@@ -497,7 +531,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}
@@ -508,7 +541,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}
@@ -566,6 +601,7 @@ export function MultiSuggestField<T>({
                         : undefined,
                 } as BlueprintMultiSelectProps<T>["popoverContentProps"]
             }
+            {...otherMultiSelectProps}
         />
     );
 

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

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useState } from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
 import { Notification } from "../Notification/Notification";

package/src/components/MultiSuggestField/index.ts

@@ -1 +1 @@
-export * from "./../MultiSelect/MultiSelect";
+export * from "./../MultiSelect/MultiSelect";

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", () => {
@@ -59,7 +26,7 @@ describe("MultiSuggestField", () => {
             const { getByText } = render(<MultiSuggestField {...predefinedNotControlledValues.args} />);
 
             const [firstSelected, secondSelected]: Array<string> = predefinedNotControlledValues.args.selectedItems.map(
-                ({ testLabel }) => testLabel
+                ({ testLabel }) => testLabel,
             );
 
             await waitFor(() => {
@@ -74,7 +41,7 @@ describe("MultiSuggestField", () => {
                     data-test-id="multi-suggest-field"
                     {...predefinedNotControlledValues.args}
                     onSelection={undefined}
-                />
+                />,
             );
 
             const selectedLength = predefinedNotControlledValues.args.selectedItems.length;
@@ -143,7 +110,7 @@ describe("MultiSuggestField", () => {
 
         it("should render disable field with selected items", async () => {
             const { container, getByText } = render(
-                <MultiSuggestField {...predefinedNotControlledValues.args} disabled />
+                <MultiSuggestField {...predefinedNotControlledValues.args} disabled />,
             );
 
             const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect__target");
@@ -151,7 +118,7 @@ describe("MultiSuggestField", () => {
             expect(inputTargetContainer.getAttribute("aria-disabled")).toBe("true");
 
             const [firstSelected, secondSelected]: Array<string> = predefinedNotControlledValues.args.selectedItems.map(
-                ({ testLabel }) => testLabel
+                ({ testLabel }) => testLabel,
             );
 
             await waitFor(() => {
@@ -170,7 +137,7 @@ describe("MultiSuggestField", () => {
             expect(clearButtonBefore).not.toBeInTheDocument();
 
             const [firstSelected, secondSelected]: Array<string> = predefinedNotControlledValues.args.selectedItems.map(
-                ({ testLabel }) => testLabel
+                ({ testLabel }) => testLabel,
             );
 
             await waitFor(() => {
@@ -200,7 +167,7 @@ describe("MultiSuggestField", () => {
 
         it("should render disable field with deferred selected items", async () => {
             const { container, rerender } = render(
-                <MultiSuggestField {...predefinedNotControlledValues.args} selectedItems={[]} disabled />
+                <MultiSuggestField {...predefinedNotControlledValues.args} selectedItems={[]} disabled />,
             );
 
             const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect__target");
@@ -208,7 +175,7 @@ describe("MultiSuggestField", () => {
             expect(inputTargetContainer.getAttribute("aria-disabled")).toBe("true");
 
             const [firstSelected, secondSelected]: Array<string> = predefinedNotControlledValues.args.selectedItems.map(
-                ({ testLabel }) => testLabel
+                ({ testLabel }) => testLabel,
             );
 
             await waitFor(() => {
@@ -232,7 +199,7 @@ describe("MultiSuggestField", () => {
             const onSelection = jest.fn();
 
             const { container } = render(
-                <MultiSuggestField {...dropdownOnFocus.args} items={items} onSelection={onSelection} />
+                <MultiSuggestField {...dropdownOnFocus.args} items={items} onSelection={onSelection} />,
             );
 
             const [inputContainer] = container.getElementsByClassName("eccgui-multiselect");
@@ -271,7 +238,7 @@ describe("MultiSuggestField", () => {
                     items={items}
                     selectedItems={initiallySelected}
                     onSelection={onSelection}
-                />
+                />,
             );
 
             await waitFor(() => {
@@ -315,7 +282,7 @@ describe("MultiSuggestField", () => {
                     {...predefinedNotControlledValues.args}
                     selectedItems={initiallySelected}
                     onSelection={onSelection}
-                />
+                />,
             );
 
             await waitFor(() => {
@@ -409,11 +376,11 @@ describe("MultiSuggestField", () => {
             const onSelection = jest.fn();
 
             const { getByText } = render(
-                <MultiSuggestField {...predefinedNotControlledValues.args} onSelection={onSelection} />
+                <MultiSuggestField {...predefinedNotControlledValues.args} onSelection={onSelection} />,
             );
 
             const [firstSelected, secondSelected]: Array<string> = predefinedNotControlledValues.args.selectedItems.map(
-                ({ testLabel }) => testLabel
+                ({ testLabel }) => testLabel,
             );
 
             await waitFor(() => {
@@ -441,7 +408,7 @@ describe("MultiSuggestField", () => {
                     items={items}
                     selectedItems={[]}
                     onSelection={onSelection}
-                />
+                />,
             );
 
             const [inputContainer] = container.getElementsByClassName("eccgui-multiselect");
@@ -566,7 +533,7 @@ describe("MultiSuggestField", () => {
             const args = { ...dropdownOnFocus.args, onSelection: onSelection };
 
             const { container } = render(
-                <MultiSuggestField {...args} data-test-id="multi-suggest-field" prePopulateWithItems />
+                <MultiSuggestField {...args} data-test-id="multi-suggest-field" prePopulateWithItems />,
             );
 
             await waitFor(() => {
@@ -593,7 +560,7 @@ describe("MultiSuggestField", () => {
             const args = { ...predefinedNotControlledValues.args, selectedItems: undefined, onSelection: onSelection };
 
             const { container } = render(
-                <MultiSuggestField {...args} data-test-id="multi-suggest-field" prePopulateWithItems />
+                <MultiSuggestField {...args} data-test-id="multi-suggest-field" prePopulateWithItems />,
             );
 
             await waitFor(() => {
@@ -637,7 +604,7 @@ describe("MultiSuggestField", () => {
 
         it("should not contain the custom css property when limitHeightOpened not provided", async () => {
             const { container } = render(
-                <MultiSuggestField {...Default.args} openOnKeyDown={false} data-testid="multi-suggest-field" />
+                <MultiSuggestField {...Default.args} openOnKeyDown={false} data-testid="multi-suggest-field" />,
             );
 
             const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect");
@@ -647,7 +614,7 @@ describe("MultiSuggestField", () => {
             await waitFor(() => {
                 const dropdown = screen.getByTestId("multi-suggest-field_dropdown");
                 const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue(
-                    "--eccgui-multisuggestfield-max-height"
+                    "--eccgui-multisuggestfield-max-height",
                 );
 
                 expect(customProperty).toBeFalsy();
@@ -661,7 +628,7 @@ describe("MultiSuggestField", () => {
                     openOnKeyDown={false}
                     limitHeightOpened={110}
                     data-testid="multi-suggest-field"
-                />
+                />,
             );
 
             const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect");
@@ -672,7 +639,7 @@ describe("MultiSuggestField", () => {
                 const dropdown = screen.getByTestId("multi-suggest-field_dropdown");
 
                 const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue(
-                    "--eccgui-multisuggestfield-max-height"
+                    "--eccgui-multisuggestfield-max-height",
                 );
 
                 expect(customProperty).toBeFalsy();
@@ -686,7 +653,7 @@ describe("MultiSuggestField", () => {
                     openOnKeyDown={false}
                     limitHeightOpened
                     data-testid="multi-suggest-field"
-                />
+                />,
             );
 
             const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect");
@@ -697,7 +664,7 @@ describe("MultiSuggestField", () => {
                 const dropdown = screen.getByTestId("multi-suggest-field_dropdown");
 
                 const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue(
-                    "--eccgui-multisuggestfield-max-height"
+                    "--eccgui-multisuggestfield-max-height",
                 );
 
                 expect(customProperty).toBeDefined();
@@ -711,7 +678,7 @@ describe("MultiSuggestField", () => {
                     openOnKeyDown={false}
                     limitHeightOpened={80}
                     data-testid="multi-suggest-field"
-                />
+                />,
             );
 
             const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect");
@@ -722,7 +689,7 @@ describe("MultiSuggestField", () => {
                 const dropdown = screen.getByTestId("multi-suggest-field_dropdown");
 
                 const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue(
-                    "--eccgui-multisuggestfield-max-height"
+                    "--eccgui-multisuggestfield-max-height",
                 );
 
                 expect(customProperty).toBeDefined();

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 = {};