@eccenca/gui-elements 25.2.0 → 26.0.0-rc.1

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

package/src/components/NotAvailable/NotAvailable.tsx

@@ -0,0 +1,69 @@
+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

@@ -14,17 +14,18 @@ import Icon, { IconProps } from "./../Icon/Icon";
 import { TestIconProps } from "./../Icon/TestIcon";
 
 export interface NotificationProps
-    extends TestableComponent,
+    extends
+        TestableComponent,
         Omit<BlueprintToastProps, "message" | "action" | "icon" | "intent">,
         React.HTMLAttributes<HTMLDivElement> {
     /**
      * 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 +98,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

package/src/components/OverviewItem/OverviewItemActions.tsx

@@ -18,7 +18,7 @@ export interface OverviewItemActionsProps extends React.HTMLAttributes<HTMLDivEl
     /**
      * Display element while the rendering of the actual children is delayed.
      */
-    delaySkeleton?: JSX.Element;
+    delaySkeleton?: React.JSX.Element;
 }
 
 /**

package/src/components/OverviewItem/OverviewItemDepiction.tsx

@@ -35,7 +35,7 @@ export const OverviewItemDepiction = ({
         "type" in children &&
         (children.type === Icon || children.type === TestIcon)
     ) {
-        return <Depiction image={children as JSX.Element} {...defaultDepictionDisplay} />;
+        return <Depiction image={children as React.JSX.Element} {...defaultDepictionDisplay} />;
     }
     return (
         <div

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

@@ -14,7 +14,7 @@ import {
     OverviewItemLine,
     Tag,
     TagList,
-} from "./../../../../index";
+} from "./../../../components";
 import { FullExample as OtherDepictionExample } from "./../../Depiction/stories/Depiction.stories";
 import { Default as ActionsExample } from "./OverviewItemActions.stories";
 import { AutoTransform as DepictionExample } from "./OverviewItemDepiction.stories";

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Button, ContextMenu, IconButton, OverviewItemActions } from "./../../../../index";
+import { Button, ContextMenu, IconButton, OverviewItemActions } from "./../../../components";
 
 export default {
     title: "Components/OverviewItem/OverviewItemActions",

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

@@ -3,7 +3,7 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import png16to9 from "../../Depiction/stories/test-16to9.png";
 
-import { Depiction, Icon, OverviewItem, OverviewItemDepiction } from "./../../../../index";
+import { Depiction, Icon, OverviewItem, OverviewItemDepiction } from "./../../../components";
 import { FullExample as DepictionExample } from "./../../Depiction/stories/Depiction.stories";
 
 export default {

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

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { OverviewItemDescription, OverviewItemLine } from "./../../../../index";
+import { OverviewItemDescription, OverviewItemLine } from "./../../../components";
 
 export default {
     title: "Components/OverviewItem/OverviewItemDescription",

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

@@ -86,7 +86,7 @@ export const OverviewItemListPerformance = ({
         // eslint-disable-next-line no-console
         console.log(
             "OverviewItemListPerformance Rendering time (s)",
-            (renderEnd.getTime() - renderStart.getTime()) / 1000
+            (renderEnd.getTime() - renderStart.getTime()) / 1000,
         );
 
         if (containerRef.current) {
@@ -96,7 +96,7 @@ export const OverviewItemListPerformance = ({
                 // eslint-disable-next-line no-console
                 console.log(
                     `Change ${++changeCount} after time (s)`,
-                    (renderChange.getTime() - renderEnd.getTime()) / 1000
+                    (renderChange.getTime() - renderEnd.getTime()) / 1000,
                 );
             };
             if (observerRef.current) {

package/src/components/Pagination/Pagination.tsx

@@ -103,7 +103,7 @@ export const usePagination = ({
         ({ page, pageSize }: { page: any; pageSize: any }) => {
             setPagination({ ..._pagination.current, current: page, limit: pageSize });
         },
-        [setPagination]
+        [setPagination],
     );
     // When the total number of pageable items changes, this function must be called
     const onTotalChange = React.useCallback(
@@ -112,7 +112,7 @@ export const usePagination = ({
                 setPagination({ ..._pagination.current, total: total, current: 1 });
             }
         },
-        [setPagination]
+        [setPagination],
     );
     const paginationElement = (
         <Pagination

package/src/components/PropertyValuePair/PropertyValueList.tsx

@@ -7,7 +7,7 @@ import { PropertyValuePair } from "./PropertyValuePair";
 export interface PropertyValueListProps extends React.HTMLAttributes<HTMLDListElement> {
     /**
      * Only use one single column and put property label and value below each other.
-     * This property is forwardd to direct `PropertyValuePair` children.
+     * This property is forward to direct `PropertyValuePair` children.
      */
     singleColumn?: boolean;
 }

package/src/components/RadioButton/Stories/RadioButton.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { HtmlContentBlock, RadioButton } from "../../../../index";
+import { HtmlContentBlock, RadioButton } from "../../../components";
 
 export default {
     title: "Forms/RadioButton",

package/src/components/Select/Select.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
 import { Button, Depiction, MenuItem, Select } from "../../index";

package/src/components/Select/Select.tsx

@@ -3,12 +3,15 @@ import { Classes as BlueprintClasses, InputGroupProps } from "@blueprintjs/core"
 import { Select as BlueprintSelect, SelectProps as BlueprintSelectProps } from "@blueprintjs/select";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Button, ButtonProps } from "../Button/Button";
+import { ContextOverlayProps } from "../ContextOverlay";
+import Icon from "../Icon/Icon";
 import { TestableComponent } from "../interfaces";
-
-import { Button, ButtonProps, ContextOverlayProps, Icon, OverflowText } from "./../../index";
+import OverflowText from "../Typography/OverflowText";
 
 export interface SelectProps<T>
-    extends TestableComponent,
+    extends
+        TestableComponent,
         Omit<BlueprintSelectProps<T>, "popoverTargetProps" | "popoverContentProps" | "popoverProps" | "popoverRef">,
         Pick<ButtonProps, "icon" | "rightIcon"> {
     /**
@@ -117,7 +120,7 @@ export function Select<T>({
                             {typeof rightIcon === "string" ? (
                                 <Icon name={rightIcon} />
                             ) : (
-                                rightIcon ?? <Icon name={"toggler-caretdown"} />
+                                (rightIcon ?? <Icon name={"toggler-caretdown"} />)
                             )}
                         </>
                     }

package/src/components/Skeleton/Skeleton.tsx

@@ -6,7 +6,7 @@ export interface SkeletonProps {
     /**
      * Element that need to displayed using the skeleton styles.
      */
-    children: JSX.Element | JSX.Element[];
+    children: React.JSX.Element | React.JSX.Element[];
 }
 
 /**
@@ -15,7 +15,7 @@ export interface SkeletonProps {
  */
 export function Skeleton({ children }: SkeletonProps) {
     const alteredChildren = React.Children.map(children, (child) => {
-        const originalChild = child as React.ReactElement;
+        const originalChild = child;
         if (originalChild.props) {
             return React.cloneElement(originalChild, {
                 className: originalChild.props.className ? originalChild.props.className + " " + SKELETON : SKELETON,

package/src/components/Spinner/Spinner.tsx

@@ -5,7 +5,7 @@ import {
     Spinner as BlueprintSpinner,
     SpinnerProps as BlueprintSpinnerProps,
 } from "@blueprintjs/core";
-import Color from "color";
+import Color, { ColorLike } from "color";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
@@ -21,7 +21,7 @@ export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "inte
      * Must be a valid css color definition.
      * `intent` property will always overwrite this setting.
      */
-    color?: Color | string | "inherit";
+    color?: ColorLike | "inherit";
     /**
      * Intent state of the spinner.
      * When used the spinner is colored.

package/src/components/Sticky/StickyTarget.tsx

@@ -101,7 +101,7 @@ export const StickyTarget = ({
                         }
                         stickyTargetRef.current?.style.setProperty(
                             "--eccgui-sticky-target-applicationoffset",
-                            `${connectedOffset}px`
+                            `${connectedOffset}px`,
                         );
                     };
 

package/src/components/Sticky/stories/StickyTarget.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { HtmlContentBlock, StickyTarget } from "../../../../index";
 
@@ -10,7 +10,7 @@ export default {
     argTypes: {},
 } as Meta<typeof StickyTarget>;
 
-const Template: Story<typeof StickyTarget> = (args) => (
+const Template: StoryFn<typeof StickyTarget> = (args) => (
     <div style={{ height: "10rem", overflow: "auto", position: "relative" }}>
         <HtmlContentBlock>
             {args.getConnectedElement && args.to !== "bottom" && (

package/src/components/Structure/TitleSubsection.tsx

@@ -6,7 +6,7 @@ export interface TitleSubsectionProps extends React.HTMLAttributes<HTMLElement>
     /**
      * HTML tag to use for element. As default element `h3` is used for a string as children, otherwise `div`.
      */
-    useHtmlElement?: keyof JSX.IntrinsicElements;
+    useHtmlElement?: keyof React.JSX.IntrinsicElements;
 }
 
 export const TitleSubsection = ({ children, className = "", useHtmlElement, ...restProps }: TitleSubsectionProps) => {
@@ -20,7 +20,7 @@ export const TitleSubsection = ({ children, className = "", useHtmlElement, ...r
             ...restProps,
             className: `${eccgui}-structure__title-subsection ` + className,
         },
-        children
+        children,
     );
 };
 

package/src/components/SuggestField/SuggestField.stories.tsx

@@ -22,7 +22,7 @@ const defaultArgs: SuggestFieldProps<string, string> = {
     onSearch: (query: string) => {
         const multiWord = highlighterUtils.extractSearchWords(query, true);
         return ["search item A", "search element B", "search object C"].filter((word) =>
-            highlighterUtils.matchesAllWords(word.toLowerCase(), multiWord)
+            highlighterUtils.matchesAllWords(word.toLowerCase(), multiWord),
         );
     },
     onChange: (elem) => {
@@ -76,7 +76,7 @@ const allowCustomValues: SuggestFieldProps<string, string> = {
     createNewItem: {
         itemRenderer: suggestFieldUtils.createNewItemRendererFactory(
             (query: string) => `Create new item: ${query}`,
-            "item-add-artefact"
+            "item-add-artefact",
         ),
         itemFromQuery: (item) => item,
     },

package/src/components/SuggestField/index.ts

@@ -6,6 +6,3 @@ export * from "./../AutocompleteField/interfaces";
 export const suggestFieldUtils = {
     createNewItemRendererFactory,
 };
-
-// @deprecated (v26) use `suggestFieldUtils`
-export const autoCompleteFieldUtils = suggestFieldUtils;