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

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

@@ -1,105 +1,407 @@
-import React from "react";
+import React, { useCallback, useState } from "react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
 
 import { MultiSuggestField } from "../MultiSuggestField";
-import { Default, dropdownOnFocus, predefinedValues } from "../MultiSuggestField.stories";
+import { Default, dropdownOnFocus, predefinedNotControlledValues } from "../MultiSuggestField.stories";
+
+const testLabels = ["label1", "label2", "label3", "label4", "label5"];
+
+const items = new Array(5).fill(undefined).map((_, id) => {
+    const testLabel = testLabels[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", () => {
-    it("should render default input", () => {
-        const { container } = render(<MultiSuggestField {...Default.args} />);
-        const [input] = container.getElementsByClassName("eccgui-multiselect");
+    describe("uncontrolled", () => {
+        it("should render default input", () => {
+            const { container } = render(<MultiSuggestField {...Default.args} />);
+            const [input] = container.getElementsByClassName("eccgui-multiselect");
 
-        expect(input).toBeInTheDocument();
-    });
+            expect(input).toBeInTheDocument();
+        });
 
-    it("should render default selected items", async () => {
-        const { getByTestId } = render(<MultiSuggestField {...predefinedValues.args} />);
+        it("should render default selected items", async () => {
+            const { getByText } = render(<MultiSuggestField {...predefinedNotControlledValues.args} />);
 
-        const [firstSelected, secondSelected]: Array<string> = predefinedValues.args.selectedItems.map(
-            ({ testLabel }) => testLabel.trim()
-        );
+            const [firstSelected, secondSelected]: Array<string> = predefinedNotControlledValues.args.selectedItems.map(
+                ({ testLabel }) => testLabel
+            );
 
-        await waitFor(() => {
-            expect(getByTestId(firstSelected)).toBeInTheDocument();
-            expect(getByTestId(secondSelected)).toBeInTheDocument();
+            await waitFor(() => {
+                expect(getByText(firstSelected)).toBeInTheDocument();
+                expect(getByText(secondSelected)).toBeInTheDocument();
+            });
         });
-    });
 
-    it("should clear all selected items on clear button click", async () => {
-        const { queryByTestId, container } = render(<MultiSuggestField {...predefinedValues.args} />);
+        it("should clear all selected items on clear button click", async () => {
+            const { container } = render(
+                <MultiSuggestField
+                    data-test-id="multi-suggest-field"
+                    {...predefinedNotControlledValues.args}
+                    onSelection={undefined}
+                />
+            );
 
-        const [firstSelected, secondSelected]: Array<string> = predefinedValues.args.selectedItems.map(
-            ({ testLabel }) => testLabel.trim()
-        );
+            const selectedLength = predefinedNotControlledValues.args.selectedItems.length;
 
-        const clearButton = container.querySelector('[data-test-id="clear-all-items"');
+            expect(container.querySelectorAll("[data-tag-index]").length).toBe(selectedLength);
 
-        expect(clearButton).toBeInTheDocument();
+            const clearButton = container.querySelector('[data-test-id="clear-all-items"');
 
-        fireEvent.click(clearButton!);
+            expect(clearButton).toBeInTheDocument();
 
-        await waitFor(() => {
-            expect(queryByTestId(firstSelected)).not.toBeInTheDocument();
-            expect(queryByTestId(secondSelected)).not.toBeInTheDocument();
+            fireEvent.click(clearButton!);
+
+            await waitFor(() => {
+                expect(container.querySelectorAll("[data-tag-index]").length).toBe(0);
+            });
         });
-    });
 
-    it("should filter options and reset them if the query is empty", async () => {
-        const { container } = render(<MultiSuggestField {...dropdownOnFocus.args} />);
+        it("should filter options and reset them if the query is empty", async () => {
+            const { container } = render(<MultiSuggestField {...dropdownOnFocus.args} />);
+
+            const [inputContainer] = container.getElementsByClassName("eccgui-multiselect");
+            const [input] = inputContainer.getElementsByTagName("input");
+
+            fireEvent.click(input);
+
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                expect(listbox).toBeInTheDocument();
+
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+                expect(menuItems.length).toBe(dropdownOnFocus.args.items.length);
+            });
+
+            fireEvent.change(input, { target: { value: "ex" } });
+
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+
+                expect(menuItems.length).toBe(1);
+
+                const noResult = screen.queryByText(dropdownOnFocus.args.noResultText);
+                expect(noResult).not.toBeInTheDocument();
+            });
+
+            fireEvent.change(input, { target: { value: "ttt" } });
 
-        const [inputContainer] = container.getElementsByClassName("eccgui-multiselect");
-        const [input] = inputContainer.getElementsByTagName("input");
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
 
-        fireEvent.click(input);
+                expect(menuItems.length).toBe(1);
 
-        await waitFor(() => {
-            const listbox = screen.getByRole("listbox");
-            expect(listbox).toBeInTheDocument();
+                const noResult = screen.queryByText(dropdownOnFocus.args.noResultText);
+                expect(noResult).toBeInTheDocument();
+            });
 
-            const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
-            expect(menuItems.length).toBe(dropdownOnFocus.args.items.length);
+            fireEvent.change(input, { target: { value: "" } });
+
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+                expect(menuItems.length).toBe(dropdownOnFocus.args.items.length);
+            });
         });
 
-        fireEvent.change(input, { target: { value: "ex" } });
+        it("should render disable field with selected items", async () => {
+            const { container, getByText } = render(
+                <MultiSuggestField {...predefinedNotControlledValues.args} disabled />
+            );
+
+            const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect__target");
 
-        await waitFor(() => {
-            const listbox = screen.getByRole("listbox");
-            const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+            expect(inputTargetContainer.getAttribute("aria-disabled")).toBe("true");
 
-            expect(menuItems.length).toBe(1);
+            const [firstSelected, secondSelected]: Array<string> = predefinedNotControlledValues.args.selectedItems.map(
+                ({ testLabel }) => testLabel
+            );
 
-            const noResult = screen.queryByText(dropdownOnFocus.args.noResultText);
-            expect(noResult).not.toBeInTheDocument();
+            await waitFor(() => {
+                expect(getByText(firstSelected)).toBeInTheDocument();
+                expect(getByText(secondSelected)).toBeInTheDocument();
+            });
         });
 
-        fireEvent.change(input, { target: { value: "ttt" } });
+        it("should set deferred selection correctly when only selected items provided and remove selection", async () => {
+            const args = { ...predefinedNotControlledValues.args, selectedItems: [] };
+
+            const { rerender, container } = render(<MultiSuggestField {...args} data-test-id="multi-suggest-field" />);
+
+            const clearButtonBefore = container.querySelector("[data-test-id='clear-all-items'");
+
+            expect(clearButtonBefore).not.toBeInTheDocument();
+
+            const [firstSelected, secondSelected]: Array<string> = predefinedNotControlledValues.args.selectedItems.map(
+                ({ testLabel }) => testLabel
+            );
 
-        await waitFor(() => {
-            const listbox = screen.getByRole("listbox");
-            const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+            await waitFor(() => {
+                expect(screen.queryByText(firstSelected)).toBeNull();
+                expect(screen.queryByText(secondSelected)).toBeNull();
+            });
 
-            expect(menuItems.length).toBe(1);
+            rerender(<MultiSuggestField {...predefinedNotControlledValues.args} data-test-id="multi-suggest-field" />);
 
-            const noResult = screen.queryByText(dropdownOnFocus.args.noResultText);
-            expect(noResult).toBeInTheDocument();
+            await waitFor(() => {
+                expect(screen.getByText(firstSelected)).toBeInTheDocument();
+                expect(screen.getByText(secondSelected)).toBeInTheDocument();
+            });
+
+            await waitFor(() => {
+                const clearButtonAfter = container.querySelector("[data-test-id='clear-all-items'");
+
+                expect(clearButtonAfter).toBeInTheDocument();
+
+                fireEvent.click(clearButtonAfter!);
+            });
+
+            await waitFor(() => {
+                expect(container.querySelectorAll("[data-tag-index]").length).toBe(0);
+            });
         });
 
-        fireEvent.change(input, { target: { value: "" } });
+        it("should render disable field with deferred selected items", async () => {
+            const { container, rerender } = render(
+                <MultiSuggestField {...predefinedNotControlledValues.args} selectedItems={[]} disabled />
+            );
+
+            const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect__target");
 
-        await waitFor(() => {
-            const listbox = screen.getByRole("listbox");
-            const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
-            expect(menuItems.length).toBe(dropdownOnFocus.args.items.length);
+            expect(inputTargetContainer.getAttribute("aria-disabled")).toBe("true");
+
+            const [firstSelected, secondSelected]: Array<string> = predefinedNotControlledValues.args.selectedItems.map(
+                ({ testLabel }) => testLabel
+            );
+
+            await waitFor(() => {
+                expect(screen.queryByText(firstSelected)).toBeNull();
+                expect(screen.queryByText(secondSelected)).toBeNull();
+            });
+
+            rerender(<MultiSuggestField {...predefinedNotControlledValues.args} disabled />);
+
+            const [updatedInputTargetContainer] = container.getElementsByClassName("eccgui-multiselect__target");
+
+            expect(updatedInputTargetContainer.getAttribute("aria-disabled")).toBe("true");
+
+            await waitFor(() => {
+                expect(screen.getByText(firstSelected)).toBeInTheDocument();
+                expect(screen.getByText(secondSelected)).toBeInTheDocument();
+            });
+        });
+
+        it("should call onSelection function with the selected items", async () => {
+            const onSelection = jest.fn();
+
+            const { container } = render(
+                <MultiSuggestField {...dropdownOnFocus.args} items={items} onSelection={onSelection} />
+            );
+
+            const [inputContainer] = container.getElementsByClassName("eccgui-multiselect");
+            const [input] = inputContainer.getElementsByTagName("input");
+
+            fireEvent.click(input);
+
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                expect(listbox).toBeInTheDocument();
+
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+                expect(menuItems.length).toBe(dropdownOnFocus.args.items.length);
+
+                const item = menuItems[0];
+                fireEvent.click(item);
+            });
+
+            await waitFor(() => {
+                const expectedObject = {
+                    createdItems: [],
+                    newlySelected: items[0],
+                    selectedItems: [items[0]],
+                };
+                expect(onSelection).toHaveBeenCalledWith(expectedObject);
+            });
         });
     });
 
-    it("should render disable field with selected items", async () => {
-        const { container } = render(<MultiSuggestField {...predefinedValues.args} disabled />);
+    describe("controlled", () => {
+        it("should render default selected items", async () => {
+            const onSelection = jest.fn();
+
+            const { getByText } = render(
+                <MultiSuggestField {...predefinedNotControlledValues.args} onSelection={onSelection} />
+            );
+
+            const [firstSelected, secondSelected]: Array<string> = predefinedNotControlledValues.args.selectedItems.map(
+                ({ testLabel }) => testLabel
+            );
+
+            await waitFor(() => {
+                expect(getByText(firstSelected)).toBeInTheDocument();
+                expect(getByText(secondSelected)).toBeInTheDocument();
+            });
+        });
+
+        it("should call onSelection function with the selected items", async () => {
+            const onSelection = jest.fn((values) => {
+                // eslint-disable-next-line no-console
+                console.log("Mocked onSelection function values: ", values);
+            });
+
+            const { container } = render(
+                <MultiSuggestField {...dropdownOnFocus.args} items={items} onSelection={onSelection} />
+            );
+
+            const [inputContainer] = container.getElementsByClassName("eccgui-multiselect");
+            const [input] = inputContainer.getElementsByTagName("input");
+
+            fireEvent.click(input);
+
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                expect(listbox).toBeInTheDocument();
+
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+                expect(menuItems.length).toBe(dropdownOnFocus.args.items.length);
+
+                const item = menuItems[0];
+                fireEvent.click(item);
+            });
+
+            await waitFor(() => {
+                const expectedObject = {
+                    createdItems: [],
+                    newlySelected: items[0],
+                    selectedItems: [items[0]],
+                };
+
+                expect(onSelection).toHaveBeenCalledWith(expectedObject);
+            });
+        });
+
+        it("should set deferred selection correctly and reset values", async () => {
+            const onSelection = jest.fn((values) => {
+                // eslint-disable-next-line no-console
+                console.log("Mocked onSelection function values: ", values);
+            });
+
+            const items = predefinedNotControlledValues.args.items;
 
-        const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect__target");
+            const args = { ...predefinedNotControlledValues.args, selectedItems: [], onSelection: onSelection };
 
-        expect(inputTargetContainer.getAttribute("aria-disabled")).toBe("true");
+            const { container, rerender } = render(<MultiSuggestField {...args} data-test-id="multi-suggest-field" />);
+
+            const [inputContainer] = container.getElementsByClassName("eccgui-multiselect");
+            const [input] = inputContainer.getElementsByTagName("input");
+
+            const clearButtonBefore = container.querySelector("[data-test-id='clear-all-items'");
+
+            expect(clearButtonBefore).not.toBeInTheDocument();
+
+            fireEvent.click(input);
+
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                expect(listbox).toBeInTheDocument();
+
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+                expect(menuItems.length).toBe(predefinedNotControlledValues.args.items.length);
+
+                const item = menuItems[0];
+                fireEvent.click(item);
+            });
+
+            await waitFor(() => {
+                const expectedObject = {
+                    createdItems: [],
+                    newlySelected: items[0],
+                    selectedItems: [items[0]],
+                };
+                expect(onSelection).toHaveBeenCalledTimes(1);
+                expect(onSelection).toHaveBeenCalledWith(expectedObject);
+            });
+
+            const selectedItems = items.slice(2);
+
+            rerender(<MultiSuggestField {...args} selectedItems={selectedItems} data-test-id="multi-suggest-field" />);
+
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                expect(listbox).toBeInTheDocument();
+
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+                expect(menuItems.length).toBe(predefinedNotControlledValues.args.items.length);
+
+                const item = menuItems[0];
+                fireEvent.click(item);
+            });
+
+            await waitFor(() => {
+                const expectedObject = {
+                    createdItems: [],
+                    newlySelected: items[0],
+                    selectedItems: [...selectedItems, items[0]],
+                };
+
+                expect(onSelection).toHaveBeenCalledTimes(2);
+                expect(onSelection).toHaveBeenCalledWith(expectedObject);
+            });
+
+            await waitFor(() => {
+                const clearButtonAfter = container.querySelector("[data-test-id='clear-all-items'");
+
+                expect(clearButtonAfter).toBeInTheDocument();
+
+                fireEvent.click(clearButtonAfter!);
+            });
+
+            await waitFor(() => {
+                const expectedObject = {
+                    createdItems: [],
+                    selectedItems: [],
+                };
+
+                expect(onSelection).toHaveBeenCalledTimes(3);
+                expect(onSelection).toHaveBeenCalledWith(expectedObject);
+            });
+        });
     });
 });

package/src/components/Sticky/StickyTarget.tsx

@@ -0,0 +1,119 @@
+import React, { CSSProperties } from "react";
+
+import { utils } from "../../common/";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+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 const StickyTarget = ({
+    className,
+    to = "top",
+    local = false,
+    background = "transparent",
+    offset,
+    style,
+    getConnectedElement,
+    ...otherDivProps
+}: StickyTargetProps) => {
+    const stickyTargetRef = React.useRef<HTMLDivElement | null>(null);
+
+    let offsetStyle = {};
+    if (typeof offset !== "undefined") {
+        offsetStyle = { ...style, "--eccgui-sticky-target-localoffset": offset } as CSSProperties;
+    }
+
+    let connectedOffset = 0;
+    React.useEffect(() => {
+        /**
+         * If the target should be sticky to a defined element then:
+         * * check for the element and its scroll parent
+         * * listen to scroll events and use the elements position as offset
+         */
+        if (getConnectedElement && stickyTargetRef) {
+            const stickyConnection = getConnectedElement(stickyTargetRef);
+            if (stickyConnection) {
+                const scrollParent = utils.getScrollParent(stickyConnection);
+                const scrollParentFallback = !scrollParent ? document.documentElement : false;
+                if (scrollParent || scrollParentFallback) {
+                    const updateTargetOffset = () => {
+                        const scrollParentPosition = (
+                            (scrollParent || scrollParentFallback) as HTMLElement
+                        ).getBoundingClientRect();
+                        const stickyConnectionPosition = stickyConnection.getBoundingClientRect();
+                        if (to === "top") {
+                            connectedOffset =
+                                stickyConnectionPosition.top -
+                                Math.max(0, scrollParentPosition.top) +
+                                stickyConnectionPosition.height;
+                        }
+                        if (to === "bottom") {
+                            connectedOffset =
+                                Math.max(scrollParentPosition.height, scrollParentPosition.bottom) -
+                                stickyConnectionPosition.bottom +
+                                stickyConnectionPosition.height;
+                        }
+                        stickyTargetRef.current?.style.setProperty(
+                            "--eccgui-sticky-target-applicationoffset",
+                            `${connectedOffset}px`
+                        );
+                    };
+                    updateTargetOffset();
+                    const eventListeningTarget = scrollParent || window;
+                    const eventListeningMethod = (_event: Event) => {
+                        updateTargetOffset();
+                    };
+                    eventListeningTarget.addEventListener("scroll", eventListeningMethod);
+                    return () => {
+                        eventListeningTarget.removeEventListener("scroll", eventListeningMethod);
+                    };
+                }
+            }
+        }
+        return;
+    }, [getConnectedElement, stickyTargetRef, to]);
+
+    return (
+        <div
+            ref={stickyTargetRef}
+            className={
+                `${eccgui}-sticky__target` +
+                (to ? ` ${eccgui}-sticky__target--${to}` : "") +
+                (local ? ` ${eccgui}-sticky__target--localscrollarea` : "") +
+                (background ? ` ${eccgui}-sticky__target--bg-${background}` : "") +
+                (className ? ` ${className}` : "")
+            }
+            style={offset ? offsetStyle : style}
+            {...otherDivProps}
+        />
+    );
+};
+
+export default StickyTarget;

package/src/components/Sticky/index.ts

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

package/src/components/Sticky/sticky.scss

@@ -0,0 +1,69 @@
+@use "sass:color";
+
+// Sticky target area
+
+.#{$eccgui}-sticky__target {
+    position: sticky;
+    z-index: 1;
+
+    --eccgui-sticky-target-applicationoffset: 0px;
+
+    .#{$eccgui}-application__content &:not(.#{$eccgui}-sticky__target--localscrollarea) {
+        --eccgui-sticky-target-applicationoffset: $eccgui-size-block-whitespace;
+    }
+
+    .#{$eccgui}-application__header
+        + .#{$eccgui}-application__content
+        &:not(.#{$eccgui}-sticky__target--localscrollarea) {
+        --eccgui-sticky-target-applicationoffset: calc(#{mini-units(8)} + #{$eccgui-size-block-whitespace});
+    }
+}
+
+.#{$eccgui}-sticky__target--top {
+    top: calc(var(--eccgui-sticky-target-applicationoffset) + var(--eccgui-sticky-target-localoffset, 0px));
+}
+
+.#{$eccgui}-sticky__target--bottom {
+    --eccgui-sticky-target-applicationoffset: 0px;
+
+    bottom: calc(var(--eccgui-sticky-target-applicationoffset) + var(--eccgui-sticky-target-localoffset, 0px));
+}
+
+.#{$eccgui}-sticky__target--bg-card {
+    background-color: $card-background-color;
+
+    .#{$eccgui}-card.#{$eccgui}-intent--primary & {
+        background-color: color.mix($eccgui-color-primary, $card-background-color, 5%);
+    }
+    .#{$eccgui}-card.#{$eccgui}-intent--accent & {
+        background-color: color.mix($eccgui-color-accent, $card-background-color, 10%);
+    }
+    .#{$eccgui}-card.#{$eccgui}-intent--success & {
+        background-color: $eccgui-color-success-background;
+    }
+    .#{$eccgui}-card.#{$eccgui}-intent--info & {
+        background-color: $eccgui-color-info-background;
+    }
+    .#{$eccgui}-card.#{$eccgui}-intent--warning & {
+        background-color: $eccgui-color-warning-background;
+    }
+    .#{$eccgui}-card.#{$eccgui}-intent--danger & {
+        background-color: $eccgui-color-danger-background;
+    }
+
+    .#{$eccgui}-card.#{$ns}-interactive:hover & {
+        background-color: $button-background-color-hover;
+    }
+
+    .#{$eccgui}-card.#{$ns}-selected & {
+        background-color: $card-selected-background-color;
+    }
+
+    .#{$eccgui}-card--elevated & {
+        background-color: $button-background-color-active;
+    }
+}
+
+.#{$eccgui}-sticky__target--bg-application {
+    background-color: $eccgui-color-application-background;
+}