@eccenca/gui-elements 23.7.0-rc.1 → 23.7.0-rc.3

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/MultiSelect/MultiSelect.d.ts

@@ -9,11 +9,7 @@ export interface MultiSelectSelectionProps<T> {
     createdItems: Partial<T>[];
 }
 export declare type SelectedParamsType<T> = MultiSelectSelectionProps<T>;
-export interface MultiSelectProps<T> extends TestableComponent, Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
-    /**
-     * Predefined selected values
-     */
-    selectedItems?: T[];
+interface MultiSelectCommonProps<T> extends TestableComponent, Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
     /**
      * Additional class name, space separated.
      */
@@ -27,10 +23,6 @@ export interface MultiSelectProps<T> extends TestableComponent, Pick<BlueprintMu
      * this would be used in the item selection list as well as the multi-select input
      */
     itemLabel: (item: T) => string;
-    /**
-     * When set to true will set the multi-select value with all the items provided
-     */
-    prePopulateWithItems?: boolean;
     /**
      *  function handler that would be called anytime an item is selected/deselected or an item is created/removed
      */
@@ -107,6 +99,19 @@ export interface MultiSelectProps<T> extends TestableComponent, Pick<BlueprintMu
      */
     wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
 }
+export declare type MultiSelectProps<T> = MultiSelectCommonProps<T> & ({
+    /**
+     * Predefined selected values
+     */
+    selectedItems?: T[];
+    prePopulateWithItems?: never;
+} | {
+    selectedItems?: never;
+    /**
+     * When set to true will set the multi-select value with all the items provided
+     */
+    prePopulateWithItems?: boolean;
+});
 /**
  * **Element is deprecated for the current type of usage.**
  * Use `MultiSuggestField` as replacement.

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

@@ -9,15 +9,26 @@ export interface StickyTargetProps extends React.HTMLAttributes<HTMLDivElement>
      * The application header is not taken into offset calculation
      */
     local?: boolean;
+    /**
+     * Set additional distance to original sticky position.
+     */
+    offset?: `${number}${string}`;
     /**
      * 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.
+     * In some situations there could be a gap between sticky target area and the border of the related scroll area.
+     * The main gap is the gap towards the direction of the sticky behaviour, specified by `to`.
+     * You can fill this gap with a gradient or full background color.
      */
-    offset?: `${number}${string}`;
+    fillMainGap?: "full" | "gradient";
+    /**
+     * The secondary gap is the gap against the direction of the sticky behaviour.
+     * So in case of `to="top"` this is rendered on the bottom of the sticky area.
+     */
+    fillSecondaryGap?: "full" | "gradient";
     /**
      * Callback that returns an DOM element.
      * The position of `StickyTarget` is then calculated relative to that element.
@@ -28,5 +39,5 @@ export interface StickyTargetProps extends React.HTMLAttributes<HTMLDivElement>
  * 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 declare const StickyTarget: ({ className, to, local, offset, background, fillMainGap, fillSecondaryGap, style, getConnectedElement, ...otherDivProps }: StickyTargetProps) => React.JSX.Element;
 export default 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/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.1",
+    "version": "23.7.0-rc.3",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",

package/src/cmem/ActivityControl/ActivityControlTypes.ts

@@ -16,6 +16,8 @@ export interface IActivityStatus {
     statusName: "Waiting" | "Finished" | "Idle" | "Running" | "Canceling";
     // A number between 0 and 100
     progress: number;
+    // timestamp for last update 
+    lastUpdateTime:string; 
     // More information corresponding to the status
     message: string;
     // If the activity has been cancelled

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/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

@@ -157,7 +157,7 @@ export interface AutoCompleteFieldProps<T, UPDATE_VALUE> {
      */
     fill?: boolean;
     /** Utility that fetches more options when clicked*/
-    loadMoreResults?: () => Promise<T[]>;
+    loadMoreResults?: () => Promise<T[] | undefined>;
 }
 
 export type IAutoCompleteFieldProps<T, UPDATE_VALUE> = AutoCompleteFieldProps<T, UPDATE_VALUE>;
@@ -452,13 +452,13 @@ export function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps
             const menu = event.target;
             const { scrollTop, scrollHeight, clientHeight } = menu;
             // Check if scrolled to the bottom of the list
-            if (scrollTop + clientHeight >= scrollHeight && loadMoreResults) {
+            if (Math.round(scrollTop + clientHeight) >= scrollHeight && loadMoreResults) {
                 const results = await loadMoreResults();
                 if (results) {
                     setFiltered((prev) => [...prev, ...results]);
                     setTimeout(() => {
-                        menu.scrollTop = scrollHeight; //safari adaptation
-                        menu.scrollTo({ left: 0, top: scrollHeight, behavior: "auto" });
+                        menu.scrollTop = scrollTop; //safari adaptation
+                        menu.scrollTo({ left: 0, top: scrollTop, behavior: "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

@@ -21,14 +21,9 @@ export interface MultiSelectSelectionProps<T> {
 // @deprecated use `MultiSelectSelectionProps<T>`
 export type SelectedParamsType<T> = MultiSelectSelectionProps<T>;
 
-export interface MultiSelectProps<T>
+interface MultiSelectCommonProps<T>
     extends TestableComponent,
         Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
-    /**
-     * Predefined selected values
-     */
-
-    selectedItems?: T[];
     /**
      * Additional class name, space separated.
      */
@@ -42,10 +37,7 @@ export interface MultiSelectProps<T>
      * this would be used in the item selection list as well as the multi-select input
      */
     itemLabel: (item: T) => string;
-    /**
-     * When set to true will set the multi-select value with all the items provided
-     */
-    prePopulateWithItems?: boolean;
+
     /**
      *  function handler that would be called anytime an item is selected/deselected or an item is created/removed
      */
@@ -127,6 +119,24 @@ export interface MultiSelectProps<T>
     wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 
+export type MultiSelectProps<T> = MultiSelectCommonProps<T> &
+    (
+        | {
+              /**
+               * Predefined selected values
+               */
+              selectedItems?: T[];
+              prePopulateWithItems?: never;
+          }
+        | {
+              selectedItems?: never;
+              /**
+               * When set to true will set the multi-select value with all the items provided
+               */
+              prePopulateWithItems?: boolean;
+          }
+    );
+
 /**
  * **Element is deprecated for the current type of usage.**
  * Use `MultiSuggestField` as replacement.
@@ -169,7 +179,7 @@ export function MultiSelect<T>({
     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, if the component is uncontrolled
+    // All options (created and passed) selected by a user
     const [selectedItems, setSelectedItems] = React.useState<T[]>(() =>
         prePopulateWithItems ? [...items] : externalSelectedItems ? [...externalSelectedItems] : []
     );
@@ -201,10 +211,6 @@ export function MultiSelect<T>({
             break;
     }
 
-    // If the component is contolled from outside, we don't need to store selected state within the component
-    // when user selects or removes selection - options will be set in a parent component
-    const isControlled = !!(externalSelectedItems && onSelection);
-
     /** Update external items when they change
      *  e.g for auto-complete when query change
      */
@@ -214,15 +220,13 @@ export function MultiSelect<T>({
     }, [items.map((item) => itemId(item)).join("|")]);
 
     React.useEffect(() => {
-        !isControlled &&
-            onSelection &&
+        onSelection &&
             onSelection({
                 newlySelected: selectedItems.slice(-1)[0],
                 createdItems: createdItems.current,
                 selectedItems,
             });
     }, [
-        isControlled,
         onSelection,
         selectedItems.map((item) => itemId(item)).join("|"),
         createdItems.current.map((item) => itemId(item)).join("|"),
@@ -237,7 +241,7 @@ export function MultiSelect<T>({
         }
 
         setSelectedItems(externalSelectedItems);
-    }, [externalSelectedItems]);
+    }, [externalSelectedItems?.map((item) => itemId(item)).join("|")]);
 
     /**
      * using the equality prop specified checks if an item has already been selected
@@ -254,15 +258,7 @@ export function MultiSelect<T>({
      */
     const removeItemSelection = (matcher: string) => {
         const filteredItems = selectedItems.filter((item) => itemId(item) !== matcher);
-
-        if (isControlled) {
-            onSelection({
-                createdItems: createdItems.current,
-                selectedItems: filteredItems,
-            });
-        } else {
-            setSelectedItems(filteredItems);
-        }
+        setSelectedItems(filteredItems);
     };
 
     /**
@@ -273,12 +269,6 @@ export function MultiSelect<T>({
     const onItemSelect = (item: T) => {
         if (itemHasBeenSelectedAlready(itemId(item))) {
             removeItemSelection(itemId(item));
-        } else if (isControlled) {
-            onSelection({
-                newlySelected: item,
-                createdItems: createdItems.current,
-                selectedItems: [...selectedItems, item],
-            });
         } else {
             setSelectedItems((items) => [...items, item]);
         }
@@ -358,15 +348,7 @@ export function MultiSelect<T>({
     const handleClear = () => {
         requestState.current.query = "";
 
-        if (isControlled) {
-            onSelection({
-                selectedItems: [],
-                createdItems: createdItems.current,
-            });
-        } else {
-            setSelectedItems([]);
-        }
-
+        setSelectedItems([]);
         setFilteredItems([...externalItems, ...createdItems.current]);
     };
 
@@ -460,6 +442,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

@@ -125,7 +125,7 @@ uncontrolledNewItemCreation.args = {
 };
 
 const CreationTemplate: StoryFn = () => {
-    const [selectedValues, setSelectedValues] = useState<string[]>([]);
+    const [selectedValues, setSelectedValues] = useState<string[]>(["foo"]);
 
     const items = useMemo<string[]>(() => ["foo", "bar", "baz"], []);
 
@@ -145,7 +145,6 @@ const CreationTemplate: StoryFn = () => {
             itemId={identity}
             itemLabel={identity}
             createNewItemFromQuery={identity}
-            prePopulateWithItems
         />
     );
 };

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

@@ -47,7 +47,7 @@ export const TestComponent = (): JSX.Element => {
 };
 
 describe("MultiSuggestField", () => {
-    describe("uncontrolled", () => {
+    describe("uncontrolled (when only selectedItems or onSelect is provided)", () => {
         it("should render default input", () => {
             const { container } = render(<MultiSuggestField {...Default.args} />);
             const [input] = container.getElementsByClassName("eccgui-multiselect");
@@ -262,7 +262,7 @@ describe("MultiSuggestField", () => {
         });
     });
 
-    describe("controlled", () => {
+    describe("controlled (when both selectedItems and onSelect are provided)", () => {
         it("should render default selected items", async () => {
             const onSelection = jest.fn();
 
@@ -287,7 +287,12 @@ describe("MultiSuggestField", () => {
             });
 
             const { container } = render(
-                <MultiSuggestField {...dropdownOnFocus.args} items={items} onSelection={onSelection} />
+                <MultiSuggestField
+                    {...dropdownOnFocus.args}
+                    items={items}
+                    selectedItems={[]}
+                    onSelection={onSelection}
+                />
             );
 
             const [inputContainer] = container.getElementsByClassName("eccgui-multiselect");
@@ -355,7 +360,6 @@ describe("MultiSuggestField", () => {
                     newlySelected: items[0],
                     selectedItems: [items[0]],
                 };
-                expect(onSelection).toHaveBeenCalledTimes(1);
                 expect(onSelection).toHaveBeenCalledWith(expectedObject);
             });
 
@@ -381,7 +385,6 @@ describe("MultiSuggestField", () => {
                     selectedItems: [...selectedItems, items[0]],
                 };
 
-                expect(onSelection).toHaveBeenCalledTimes(2);
                 expect(onSelection).toHaveBeenCalledWith(expectedObject);
             });
 
@@ -399,9 +402,90 @@ describe("MultiSuggestField", () => {
                     selectedItems: [],
                 };
 
-                expect(onSelection).toHaveBeenCalledTimes(3);
                 expect(onSelection).toHaveBeenCalledWith(expectedObject);
             });
         });
+
+        it("should set prePopulateWithItems as selected values and override passed values", async () => {
+            const onSelection = jest.fn((values) => {
+                // eslint-disable-next-line no-console
+                console.log("Mocked onSelection function values: ", values);
+            });
+
+            const items = dropdownOnFocus.args.items;
+
+            const args = { ...dropdownOnFocus.args, onSelection: onSelection };
+
+            const { container } = render(
+                <MultiSuggestField {...args} data-test-id="multi-suggest-field" prePopulateWithItems />
+            );
+
+            await waitFor(() => {
+                const expectedObject = {
+                    createdItems: [],
+                    newlySelected: items.at(-1),
+                    selectedItems: items,
+                };
+                expect(onSelection).toHaveBeenCalledWith(expectedObject);
+            });
+
+            const tags = container.querySelectorAll("span[data-tag-index]");
+
+            expect(tags.length).toBe(items.length);
+        });
+
+        it("should correctly deselect all tags from input", async () => {
+            const onSelection = jest.fn((values) => {
+                // eslint-disable-next-line no-console
+                console.log("Mocked onSelection function values 111: ", values);
+            });
+
+            const items = predefinedNotControlledValues.args.items;
+
+            const args = { ...predefinedNotControlledValues.args, selectedItems: undefined, onSelection: onSelection };
+
+            const { container } = render(
+                <MultiSuggestField {...args} data-test-id="multi-suggest-field" prePopulateWithItems />
+            );
+
+            await waitFor(() => {
+                const expectedObject = {
+                    createdItems: [],
+                    newlySelected: items.at(-1),
+                    selectedItems: items,
+                };
+                expect(onSelection).toHaveBeenCalledWith(expectedObject);
+            });
+
+            let tags = container.querySelectorAll("span[data-tag-index]");
+            expect(tags.length).toBe(items.length);
+
+            for (let i = 0; i < items.length; i += 1) {
+                const tag = tags[0];
+                expect(tag.querySelector("span")).toHaveTextContent(items[i].testLabel);
+
+                const removeTagButton = tag.querySelector("button");
+                expect(removeTagButton).toBeTruthy();
+
+                fireEvent.click(removeTagButton!);
+
+                await waitFor(() => {
+                    const selected = items.slice(i + 1);
+
+                    const expectedObject = {
+                        createdItems: [],
+                        newlySelected: selected.at(-1),
+                        selectedItems: selected,
+                    };
+
+                    expect(onSelection).toHaveBeenCalledWith(expectedObject);
+                });
+
+                tags = container.querySelectorAll("span[data-tag-index]");
+            }
+
+            const tagsAfterRemove = container.querySelectorAll("span[data-tag-index]");
+            expect(tagsAfterRemove.length).toBe(0);
+        });
     });
 });