@eccenca/gui-elements 23.7.0-rc.0 → 23.7.0-rc.2

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC;AAClD,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC;AAClD,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,cAAc,cAAc,CAAC"}

package/dist/types/common/index.d.ts

@@ -21,6 +21,7 @@ export declare const utils: {
     };
     getGlobalVar: (varname: string) => Window;
     setGlobalVar: (varname: string, value: any) => any;
+    getScrollParent: (element: Element) => false | HTMLElement;
 };
 export declare const Utilities: {
     openInNewTab: (event: import("react").MouseEvent<HTMLAnchorElement, MouseEvent>, handler?: ((e: import("react").MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined, url?: string | undefined) => void;
@@ -44,4 +45,5 @@ export declare const Utilities: {
     };
     getGlobalVar: (varname: string) => Window;
     setGlobalVar: (varname: string, value: any) => any;
+    getScrollParent: (element: Element) => false | HTMLElement;
 };

package/dist/types/common/utils/getScrollParent.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Find the scroll parent of an element, returns `false` if it cannot be found.
+ * In case of a `false` return the very probably `document.documentElement` is the parent.
+ * In this case `window` object should be used for scroll event listeners.
+ * See `src/components/Sticky/StickyTarget.tsx` for an usage example.
+ * @param element
+ * @returns HTMLElement | false
+ */
+export declare const getScrollParent: (element: Element) => HTMLElement | false;

package/dist/types/components/AutocompleteField/AutoCompleteField.d.ts

@@ -109,6 +109,8 @@ export interface AutoCompleteFieldProps<T, UPDATE_VALUE> {
      * Use the full available width of the parent container.
      */
     fill?: boolean;
+    /** Utility that fetches more options when clicked*/
+    loadMoreResults?: () => Promise<T[] | undefined>;
 }
 export declare type IAutoCompleteFieldProps<T, UPDATE_VALUE> = AutoCompleteFieldProps<T, UPDATE_VALUE>;
 /**

package/dist/types/components/Breadcrumb/BreadcrumbList.d.ts

@@ -8,7 +8,8 @@ export interface BreadcrumbListProps extends TestableComponent, Omit<BlueprintBr
     */
     items: BreadcrumbItemProps[];
     /**
-        click handler used on breadcrumb items
+        Click handler used on all breadcrumb items using their `href` property.
+        Is only used if the breadcrumb item have not defined an own `onClick` handler.
     */
     onItemClick?(itemUrl: string | undefined, event: object): boolean | void;
     /**

package/dist/types/components/Card/Card.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { CardProps as BlueprintCardProps } from "@blueprintjs/core";
-export interface CardProps extends BlueprintCardProps {
+import { CardProps as BlueprintCardProps, Elevation as BlueprintCardElevation } from "@blueprintjs/core";
+export interface CardProps extends Omit<BlueprintCardProps, "elevation"> {
     /**
      * `<Card />` element is included in DOM as simple `div` element.
      * By default it is a HTML `section`.
@@ -14,6 +14,12 @@ export interface CardProps extends BlueprintCardProps {
      * Background color is slightly altered to differ card display from other cards.
      */
     elevated?: boolean;
+    /**
+     * Controls the intensity of the drop shadow beneath the card.
+     * At elevation `0`, no drop shadow is applied.
+     * At elevation `-1`, the card is even borderless.
+     */
+    elevation?: -1 | BlueprintCardElevation;
     /**
      * When card (or its children) get focus the card is scrolled into the viewport.
      * Property value defined which part of the card is always scrolled in, this may important when the card is larger than the viewport.

package/dist/types/components/Sticky/StickyTarget.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+export interface StickyTargetProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Set the side the element need to be sticky on.
+     */
+    to?: "top" | "bottom";
+    /**
+     * The sticky area is positioned relatively to a local scroll area.
+     * The application header is not taken into offset calculation
+     */
+    local?: boolean;
+    /**
+     * Set the background color used for the sticky area.
+     * As it can overlay other content readability could be harmed if the overlayed content is shining through.
+     */
+    background?: "card" | "application" | "transparent";
+    /**
+     * Set additional distance to original sticky position.
+     */
+    offset?: `${number}${string}`;
+    /**
+     * Callback that returns an DOM element.
+     * The position of `StickyTarget` is then calculated relative to that element.
+     */
+    getConnectedElement?: (ref: React.MutableRefObject<HTMLDivElement | null>) => Element | false;
+}
+/**
+ * Element wraps the content that need to be displayed sticky.
+ * The content then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor).
+ */
+export declare const StickyTarget: ({ className, to, local, background, offset, style, getConnectedElement, ...otherDivProps }: StickyTargetProps) => React.JSX.Element;
+export default StickyTarget;

package/dist/types/components/Sticky/index.d.ts

@@ -0,0 +1 @@
+export * from "./StickyTarget";

package/dist/types/components/TextField/TextArea.d.ts

@@ -1,27 +1,52 @@
 import React from "react";
-import { TextAreaProps as BlueprintTextAreaProps } from "@blueprintjs/core";
+import { MaybeElement, TextAreaProps as BlueprintTextAreaProps } from "@blueprintjs/core";
+import { IntentTypes } from "../../common/Intent";
+import { ValidIconName } from "../Icon/canonicalIconNames";
 import { InvisibleCharacterWarningProps } from "./useTextValidation";
-export interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
+export interface TextAreaProps extends Omit<BlueprintTextAreaProps, "intent"> {
     /**
      * when set to true the input takes a blue border color
+     * @deprecated Use the `intent` property.
      */
     hasStatePrimary?: boolean;
     /**
      * when set to true the input takes a green border color
+     * @deprecated Use the `intent` property.
      */
     hasStateSuccess?: boolean;
     /**
      * when set to true the input takes an orange border color
+     * @deprecated Use the `intent` property.
      */
     hasStateWarning?: boolean;
     /**
      * when set to true the input takes a red border color
+     * @deprecated Use the `intent` property.
      */
     hasStateDanger?: boolean;
+    /**
+     * Intent state of the text area.
+     */
+    intent?: IntentTypes | "edited" | "removed";
     /**
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
     invisibleCharacterWarning?: InvisibleCharacterWarningProps;
+    /**
+     * Left aligned icon, can be a canonical icon name or an `Icon` element.
+     * This will update left padding on the text area.
+     */
+    leftIcon?: ValidIconName | MaybeElement;
+    /**
+     * Element to render on right side of text area. Should be not too large.
+     * This will update right padding on the text area.
+     */
+    rightElement?: JSX.Element;
+    /**
+     * Add HTML properties to the wrapper element.
+     * The element wraps `TextArea` in case of a given `wrapperDivProps`, `leftIcon` or `rightElement` property.
+     */
+    wrapperDivProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
 }
-export declare const TextArea: ({ className, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, rows, invisibleCharacterWarning, ...otherProps }: TextAreaProps) => React.JSX.Element;
+export declare const TextArea: ({ className, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, rows, invisibleCharacterWarning, leftIcon, rightElement, wrapperDivProps, ...otherProps }: TextAreaProps) => React.JSX.Element;
 export default TextArea;

package/dist/types/components/index.d.ts

@@ -36,6 +36,7 @@ export * from "./Separation/Divider";
 export * from "./Separation/Spacing";
 export * from "./Skeleton/Skeleton";
 export * from "./Spinner/Spinner";
+export * from "./Sticky";
 export * from "./Structure";
 export * from "./Switch/Switch";
 export * from "./Table";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "23.7.0-rc.0",
+    "version": "23.7.0-rc.2",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",

package/src/cmem/markdown/Markdown.tsx

@@ -3,7 +3,7 @@ import ReactMarkdown from "react-markdown";
 import { PluggableList } from "react-markdown/lib/react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { materialLight } from "react-syntax-highlighter/dist/esm/styles/prism";
-// @ts-expect-error: No declaration file for module
+// @ts-ignore: No declaration file for module (TODO: should be @ts-expect-error but GUI elements is used inside project with `noImplicitAny=false`)
 import remarkTypograf from "@mavrin/remark-typograf";
 import rehypeRaw from "rehype-raw";
 import { remarkDefinitionList } from "remark-definition-list";

package/src/common/index.ts

@@ -1,6 +1,7 @@
 import { invisibleZeroWidthCharacters } from "./utils/characters";
 import decideContrastColorValue from "./utils/colorDecideContrastvalue";
 import getColorConfiguration from "./utils/getColorConfiguration";
+import { getScrollParent } from "./utils/getScrollParent";
 import { getGlobalVar, setGlobalVar } from "./utils/globalVars";
 import { openInNewTab } from "./utils/openInNewTab";
 
@@ -11,6 +12,8 @@ export const utils = {
     invisibleZeroWidthCharacters,
     getGlobalVar,
     setGlobalVar,
+    getScrollParent,
 };
+
 // @deprecated use `utils`
 export const Utilities = utils;

package/src/common/utils/getScrollParent.ts

@@ -0,0 +1,20 @@
+/**
+ * Find the scroll parent of an element, returns `false` if it cannot be found.
+ * In case of a `false` return the very probably `document.documentElement` is the parent.
+ * In this case `window` object should be used for scroll event listeners.
+ * See `src/components/Sticky/StickyTarget.tsx` for an usage example.
+ * @param element
+ * @returns HTMLElement | false
+ */
+export const getScrollParent = (element: Element): HTMLElement | false => {
+    let scrollParent = element.parentElement;
+    while (scrollParent) {
+        const { overflow } = window.getComputedStyle(scrollParent);
+        if (overflow.split(" ").every((value) => value === "auto" || value === "scroll")) {
+            return scrollParent;
+        }
+        scrollParent = scrollParent.parentElement;
+    }
+
+    return false;
+};

package/src/components/Application/application.scss

@@ -1,5 +1,4 @@
 // @import 'config';
-@import "~@carbon/styles/scss/components/ui-shell/functions";
 @import "header";
 @import "toolbar";
 

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -156,6 +156,8 @@ export interface AutoCompleteFieldProps<T, UPDATE_VALUE> {
      * Use the full available width of the parent container.
      */
     fill?: boolean;
+    /** Utility that fetches more options when clicked*/
+    loadMoreResults?: () => Promise<T[] | undefined>;
 }
 
 export type IAutoCompleteFieldProps<T, UPDATE_VALUE> = AutoCompleteFieldProps<T, UPDATE_VALUE>;
@@ -195,6 +197,7 @@ export function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps
         requestErrorPrefix,
         hasBackDrop,
         fill,
+        loadMoreResults,
         ...otherProps
     } = props;
     const [selectedItem, setSelectedItem] = useState<T | undefined>(initialValue);
@@ -334,6 +337,7 @@ export function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps
             disabled: modifiers.disabled,
             highlightingEnabled: highlightingEnabled,
         };
+
         const renderedItem = itemRenderer(item, query, relevantModifiers, handleClick);
         if (typeof renderedItem === "string") {
             return (
@@ -442,6 +446,26 @@ export function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps
               createNewItemPosition,
           }
         : {};
+
+    const handleMenuScroll = React.useCallback(
+        async (event: any) => {
+            const menu = event.target;
+            const { scrollTop, scrollHeight, clientHeight } = menu;
+            // Check if scrolled to the bottom of the list
+            if (Math.round(scrollTop + clientHeight) >= scrollHeight && loadMoreResults) {
+                const results = await loadMoreResults();
+                if (results) {
+                    setFiltered((prev) => [...prev, ...results]);
+                    setTimeout(() => {
+                        menu.scrollTop = scrollTop; //safari adaptation
+                        menu.scrollTo({ left: 0, top: scrollTop, behavior: "auto" });
+                    });
+                }
+            }
+        },
+        [loadMoreResults]
+    );
+
     return (
         <BlueprintSuggest<T>
             className={`${eccgui}-autocompletefield__input` + (className ? ` ${className}` : "")}
@@ -455,7 +479,11 @@ export function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps
             noResults={<MenuItem disabled={true} text={noResultText} />}
             onItemSelect={onSelectionChange}
             onQueryChange={(q) => setQuery(q)}
+            resetOnQuery={false}
             closeOnSelect={true}
+            menuProps={{
+                onScroll: handleMenuScroll,
+            }}
             query={query}
             // This leads to odd compile errors without "as any"
             popoverProps={updatedContextOverlayProps as any}

package/src/components/AutocompleteField/autocompletefield.scss

@@ -1,5 +1,5 @@
 .#{$eccgui}-autocompletefield__options {
-    .#{$ns}-popover2-content {
+    .#{$ns}-popover-content {
         .#{$ns}-menu {
             max-height: 45vh;
             overflow: auto;

package/src/components/Breadcrumb/BreadcrumbList.tsx

@@ -10,7 +10,6 @@ import { TestableComponent } from "../interfaces";
 import BreadcrumbItem from "./BreadcrumbItem";
 import { BreadcrumbItemProps } from "./BreadcrumbItem";
 
-// FIXME: enforce onItemClick later when href value can always be routed correctly
 export interface BreadcrumbListProps
     extends TestableComponent,
         Omit<
@@ -28,7 +27,8 @@ export interface BreadcrumbListProps
     */
     items: BreadcrumbItemProps[];
     /**
-        click handler used on breadcrumb items
+        Click handler used on all breadcrumb items using their `href` property.
+        Is only used if the breadcrumb item have not defined an own `onClick` handler.
     */
     onItemClick?(itemUrl: string | undefined, event: object): boolean | void;
     /**
@@ -80,7 +80,7 @@ export const BreadcrumbList = ({
                     /*itemDivider="/"*/
                     {...otherProps}
                     onClick={
-                        onItemClick
+                        onItemClick && propsBreadcrumb.href && !onClick
                             ? (e) => {
                                   onItemClick(propsBreadcrumb.href, e);
                               }

package/src/components/Card/Card.tsx

@@ -1,9 +1,13 @@
 import React from "react";
-import { Card as BlueprintCard, CardProps as BlueprintCardProps } from "@blueprintjs/core";
+import {
+    Card as BlueprintCard,
+    CardProps as BlueprintCardProps,
+    Elevation as BlueprintCardElevation,
+} from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface CardProps extends BlueprintCardProps {
+export interface CardProps extends Omit<BlueprintCardProps, "elevation"> {
     /**
      * `<Card />` element is included in DOM as simple `div` element.
      * By default it is a HTML `section`.
@@ -17,6 +21,12 @@ export interface CardProps extends BlueprintCardProps {
      * Background color is slightly altered to differ card display from other cards.
      */
     elevated?: boolean;
+    /**
+     * Controls the intensity of the drop shadow beneath the card.
+     * At elevation `0`, no drop shadow is applied.
+     * At elevation `-1`, the card is even borderless.
+     */
+    elevation?: -1 | BlueprintCardElevation;
     /**
      * When card (or its children) get focus the card is scrolled into the viewport.
      * Property value defined which part of the card is always scrolled in, this may important when the card is larger than the viewport.
@@ -48,6 +58,7 @@ export const Card = ({
         ? {
               tabIndex: 0,
               onFocus: (e: any) => {
+                  // FIXME: we should not have any hard relations to apps that using this lib
                   const el = e.target.closest(".diapp-iframewindow__content");
                   setTimeout(() => {
                       if (el)
@@ -68,9 +79,10 @@ export const Card = ({
                 (elevated ? ` ${eccgui}-card--elevated` : "") +
                 (scrollinOnFocus ? ` ${eccgui}-card--scrollonfocus` : "") +
                 (whitespaceAmount !== "medium" ? ` ${eccgui}-card--whitespace-${whitespaceAmount}` : "") +
+                (elevation < 0 ? ` ${eccgui}-card--whitespace-borderless` : "") +
                 (className ? ` ${className}` : "")
             }
-            elevation={elevation}
+            elevation={Math.max(0, elevation) as BlueprintCardElevation}
             interactive={otherProps.onClick ? true : interactive}
             {...scrollIn}
             {...otherProps}

package/src/components/Card/card.scss

@@ -1,9 +1,10 @@
+@use "sass:color";
+
 $card-padding: 0 !default;
 $card-background-color: $white !default;
 $card-selected-background-color: rgba($blue3, 0.1);
 $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 
-@use "sass:color";
 @import "~@blueprintjs/core/src/components/card/card";
 
 .#{$eccgui}-card {
@@ -61,6 +62,10 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     outline: none;
 }
 
+.#{$eccgui}-card--whitespace-borderless {
+    box-shadow: none;
+}
+
 .#{$eccgui}-card__header {
     box-sizing: content-box;
     flex-grow: 0;

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

@@ -24,7 +24,7 @@ export default {
 
 const Template: StoryFn<typeof Icon> = (args) => (
     <OverlaysProvider>
-        <Icon {...args} tooltipText={args.name?.toString()} />
+        <Icon tooltipText={args.name?.toString()} {...args} />
     </OverlaysProvider>
 );
 

package/src/components/MultiSelect/MultiSelect.tsx

@@ -229,16 +229,15 @@ export function MultiSelect<T>({
     ]);
 
     /**
-     * Update selected items if the component is controlled and we get
-     * new selected items from outside
+     * Update selected items if we get new selected items from outside
      */
     React.useEffect(() => {
-        if (!isControlled) {
+        if (!externalSelectedItems) {
             return;
         }
 
         setSelectedItems(externalSelectedItems);
-    }, [isControlled, externalSelectedItems]);
+    }, [externalSelectedItems]);
 
     /**
      * using the equality prop specified checks if an item has already been selected
@@ -461,6 +460,11 @@ export function MultiSelect<T>({
 
     const contentMultiSelect = (
         <BlueprintMultiSelect<T>
+            placeholder={
+                !otherMultiSelectProps.placeholder && createNewItemFromQuery
+                    ? "Search for item, or enter term to create new one..."
+                    : undefined
+            }
             {...otherMultiSelectProps}
             query={requestState.current.query}
             onQueryChange={onQueryChange}

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 { Meta, StoryFn } from "@storybook/react";
 
-import { MultiSelectSelectionProps, MultiSuggestField } from "./../../../index";
+import { MultiSelectSelectionProps, MultiSuggestField, SimpleDialog } from "./../../../index";
 
 const testLabels = loremIpsum({
     p: 1,
@@ -78,6 +78,40 @@ predefinedNotControlledValues.args = {
     itemLabel: (item) => item.testLabel,
 };
 
+const DeferredSelectionTemplate: StoryFn = () => {
+    const initialSelected: Array<{ testId: string; testLabel: string }> = [];
+    const [loaded, setLoaded] = useState(false);
+
+    const selected = loaded ? selectedItems : initialSelected;
+
+    const identity = useCallback((item: string): string => item, []);
+
+    return (
+        <>
+            <div>Selected items loaded: {loaded.toString()}</div>
+
+            <br />
+
+            <MultiSuggestField<string>
+                items={items.map(({ testId }) => testId)}
+                selectedItems={selected.map(({ testId }) => testId)}
+                itemId={identity}
+                itemLabel={(itemId) => items.find(({ testId }) => testId === itemId)?.testLabel ?? itemId}
+                createNewItemFromQuery={(query) => query}
+            />
+
+            <br />
+
+            <button onClick={() => setLoaded((prev) => !prev)}>Toggle selected</button>
+        </>
+    );
+};
+
+/**
+ *
+ */
+export const deferredSelection = DeferredSelectionTemplate.bind({});
+
 /**
  * New item creation, add to a existing list
  */
@@ -160,3 +194,44 @@ const WithResetButton: StoryFn = () => {
  * Reset values
  */
 export const withResetItemAndCreation = WithResetButton.bind({});
+
+const WithinModal = (): JSX.Element => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    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 (
+        <>
+            <button onClick={() => setIsOpen(true)}>open modal</button>
+
+            <SimpleDialog isOpen={isOpen} onClose={() => setIsOpen(false)} canOutsideClickClose>
+                <div>
+                    <button onClick={handleReset}>Reset</button>
+                    <br />
+                    <br />
+                    <MultiSuggestField<{ testLabel: string; testId: string }>
+                        items={items}
+                        selectedItems={selected}
+                        onSelection={handleOnSelect}
+                        itemId={({ testId }) => testId}
+                        itemLabel={({ testLabel }) => testLabel}
+                        createNewItemFromQuery={(query) => ({ testId: `${query}-id`, testLabel: query })}
+                    />
+                </div>
+            </SimpleDialog>
+        </>
+    );
+};
+
+export const withinModal = WithinModal.bind({});