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

package/src/components/MultiSelect/MultiSelect.tsx

@@ -13,7 +13,7 @@ import { TestableComponent } from "../interfaces";
 import { ContextOverlayProps, Highlighter, IconButton, MenuItem, OverflowText, Spinner } from "./../../index";
 
 export interface MultiSelectSelectionProps<T> {
-    newlySelected: T;
+    newlySelected?: T;
     selectedItems: T[];
     createdItems: Partial<T>[];
 }
@@ -136,7 +136,7 @@ export interface MultiSelectProps<T>
  */
 export function MultiSelect<T>({
     items,
-    selectedItems: externalSelectedItems = [],
+    selectedItems: externalSelectedItems,
     prePopulateWithItems,
     itemId,
     itemLabel,
@@ -163,13 +163,17 @@ export function MultiSelect<T>({
     wrapperProps,
     ...otherMultiSelectProps
 }: MultiSelectProps<T>) {
-    const [createdItems, setCreatedItems] = React.useState<T[]>([]);
-    const [createdSelectedItems, setCreatedSelectedItems] = React.useState<T[]>([]);
-    const [itemsCopy, setItemsCopy] = React.useState<T[]>([...items]);
-    const [filteredItemList, setFilteredItemList] = React.useState<T[]>([]);
+    // Options created by a user
+    const createdItems = useRef<T[]>([]);
+    // Options passed ouside (f.e. from the backend)
+    const [externalItems, setExternalItems] = React.useState<T[]>([...items]);
+    // All options (created and passed) that match the query
+    const [filteredItems, setFilteredItems] = React.useState<T[]>([]);
+    // All options (created and passed) selected by a user, if the component is uncontrolled
     const [selectedItems, setSelectedItems] = React.useState<T[]>(() =>
-        prePopulateWithItems ? [...items] : [...externalSelectedItems]
+        prePopulateWithItems ? [...items] : externalSelectedItems ? [...externalSelectedItems] : []
     );
+
     //currently focused element in popover list
     const [focusedItem, setFocusedItem] = React.useState<T | null>(null);
     const [showSpinner, setShowSpinner] = React.useState(false);
@@ -197,27 +201,45 @@ export function MultiSelect<T>({
             break;
     }
 
-    /** update items copy when the items change
+    // 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
      */
     React.useEffect(() => {
-        setItemsCopy([...items, ...createdItems]);
-        setFilteredItemList([...items, ...createdItems]);
+        setExternalItems(items);
+        setFilteredItems([...items, ...createdItems.current]);
     }, [items.map((item) => itemId(item)).join("|")]);
 
     React.useEffect(() => {
-        onSelection &&
+        !isControlled &&
+            onSelection &&
             onSelection({
                 newlySelected: selectedItems.slice(-1)[0],
-                createdItems: createdSelectedItems,
+                createdItems: createdItems.current,
                 selectedItems,
             });
     }, [
+        isControlled,
         onSelection,
         selectedItems.map((item) => itemId(item)).join("|"),
-        createdSelectedItems.map((item) => itemId(item)).join("|"),
+        createdItems.current.map((item) => itemId(item)).join("|"),
     ]);
 
+    /**
+     * Update selected items if the component is controlled and we get
+     * new selected items from outside
+     */
+    React.useEffect(() => {
+        if (!isControlled) {
+            return;
+        }
+
+        setSelectedItems(externalSelectedItems);
+    }, [isControlled, externalSelectedItems]);
+
     /**
      * using the equality prop specified checks if an item has already been selected
      * @param matcher
@@ -232,7 +254,16 @@ export function MultiSelect<T>({
      * @param matcher
      */
     const removeItemSelection = (matcher: string) => {
-        setSelectedItems((items) => items.filter((item) => itemId(item) !== matcher));
+        const filteredItems = selectedItems.filter((item) => itemId(item) !== matcher);
+
+        if (isControlled) {
+            onSelection({
+                createdItems: createdItems.current,
+                selectedItems: filteredItems,
+            });
+        } else {
+            setSelectedItems(filteredItems);
+        }
     };
 
     /**
@@ -243,24 +274,16 @@ 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]);
         }
 
-        //remove if already exist
-        if (createdSelectedItems.find((t) => itemLabel(t) === itemLabel(item))) {
-            setCreatedSelectedItems((prevItems) =>
-                prevItems.filter((prevItem) => itemLabel(prevItem) !== itemLabel(item))
-            );
-        } else {
-            const wasNewlyCreated = createdItems.find((t) => itemLabel(t) === itemLabel(item));
-            //only add to createdSelectedItems if it was previously created and not
-            // from the initial items or a possible query response
-            if (wasNewlyCreated) {
-                setCreatedSelectedItems((prevItems) => [...prevItems, item]);
-            }
-        }
-
         if (clearQueryOnSelection) {
             requestState.current.query = "";
             inputRef.current?.focus();
@@ -281,12 +304,13 @@ export function MultiSelect<T>({
             }
             const fn = async () => {
                 setShowSpinner(true);
-                setFilteredItemList([]);
+                setFilteredItems([]);
                 const resultFromQuery = runOnQueryChange && (await runOnQueryChange(removeExtraSpaces(query)));
                 if (requestState.current.query === query) {
                     // Only use most recent request
-                    setFilteredItemList(() =>
-                        [...(resultFromQuery ?? itemsCopy), ...createdItems].filter((item) =>
+                    const outsideOptions = [...(resultFromQuery ?? externalItems)];
+                    setFilteredItems(
+                        [...outsideOptions, ...createdItems.current].filter((item) =>
                             itemLabel(item).toLowerCase().includes(query.toLowerCase())
                         )
                     );
@@ -297,7 +321,7 @@ export function MultiSelect<T>({
         } else if (!query.length) {
             // if the query is empty we need to show all options and reset current query
             requestState.current.query = "";
-            setFilteredItemList(() => [...itemsCopy, ...createdItems]);
+            setFilteredItems(() => [...externalItems, ...createdItems.current]);
         }
     };
 
@@ -314,7 +338,7 @@ export function MultiSelect<T>({
             return null;
         }
         let label = itemLabel(item);
-        if (createdItems.find((created) => itemId(created) === itemId(item))) {
+        if (createdItems.current.find((created) => itemId(created) === itemId(item))) {
             label += newItemPostfix;
         }
         return (
@@ -334,8 +358,17 @@ export function MultiSelect<T>({
      */
     const handleClear = () => {
         requestState.current.query = "";
-        setSelectedItems([]);
-        setFilteredItemList(itemsCopy);
+
+        if (isControlled) {
+            onSelection({
+                selectedItems: [],
+                createdItems: createdItems.current,
+            });
+        } else {
+            setSelectedItems([]);
+        }
+
+        setFilteredItems([...externalItems, ...createdItems.current]);
     };
 
     /**
@@ -343,9 +376,8 @@ export function MultiSelect<T>({
      * @param label
      * @param index
      */
-    const removeTagFromSelectionViaIndex = (label: React.ReactNode, index: number) => {
+    const removeTagFromSelectionViaIndex = (_label: React.ReactNode, index: number) => {
         setSelectedItems([...selectedItems.slice(0, index), ...selectedItems.slice(index + 1)]);
-        setCreatedSelectedItems((items) => items.filter((item) => itemLabel(item) !== label));
     };
 
     /**
@@ -354,9 +386,8 @@ export function MultiSelect<T>({
     const createNewItem = (query: string): T => {
         const newItem = createNewItemFromQuery!(query);
         //set new items
-        setCreatedItems((items) => [...items, newItem]);
-        setCreatedSelectedItems((items) => [...items, newItem]);
-        setFilteredItemList((items) => [...items, newItem]);
+        createdItems.current = [...createdItems.current, newItem];
+        setFilteredItems((items) => [...items, newItem]);
         requestState.current.query = "";
         return newItem;
     };
@@ -366,12 +397,7 @@ export function MultiSelect<T>({
      * @param event
      */
     const handleOnKeyUp = (event: React.KeyboardEvent<HTMLElement>) => {
-        if (
-            event.key === "Enter" &&
-            !filteredItemList.length &&
-            !!requestState.current.query &&
-            createNewItemFromQuery
-        ) {
+        if (event.key === "Enter" && !filteredItems.length && !!requestState.current.query && createNewItemFromQuery) {
             createNewItem(requestState.current.query);
         }
         inputRef.current?.focus();
@@ -438,7 +464,7 @@ export function MultiSelect<T>({
             {...otherMultiSelectProps}
             query={requestState.current.query}
             onQueryChange={onQueryChange}
-            items={filteredItemList}
+            items={filteredItems}
             onItemSelect={onItemSelect}
             itemRenderer={onItemRenderer}
             itemsEqual={(a: T, b: T) => itemId(a) === itemId(b)}

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

@@ -4,22 +4,6 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { MultiSelectSelectionProps, MultiSuggestField } from "./../../../index";
 
-export default {
-    title: "Forms/MultiSuggestField",
-    component: MultiSuggestField,
-    argTypes: {
-        items: {
-            control: "none",
-        },
-    },
-} as Meta<typeof MultiSuggestField>;
-
-const Template: StoryFn<typeof MultiSuggestField> = (args) => (
-    <div>
-        <MultiSuggestField {...args} />
-    </div>
-);
-
 const testLabels = loremIpsum({
     p: 1,
     avgSentencesPerParagraph: 5,
@@ -28,13 +12,32 @@ const testLabels = loremIpsum({
     random: false,
 })
     .toString()
-    .split(".");
+    .split(".")
+    .map((item) => item.trim());
 
 const items = new Array(5).fill(undefined).map((_, id) => {
     const testLabel = testLabels[id];
     return { testLabel, testId: `${testLabel}-id` };
 });
 
+export default {
+    title: "Forms/MultiSuggestField",
+    component: MultiSuggestField,
+    argTypes: {
+        items: {
+            control: "none",
+        },
+    },
+} as Meta<typeof MultiSuggestField>;
+
+const Template: StoryFn<typeof MultiSuggestField> = (args) => {
+    return (
+        <div>
+            <MultiSuggestField {...args} />
+        </div>
+    );
+};
+
 export const Default = Template.bind({});
 Default.args = {
     items,
@@ -64,20 +67,22 @@ const selectedItems = items.slice(1, 3);
 /**
  * Set the default selected values from the client code.
  */
-export const predefinedValues = Template.bind({});
-predefinedValues.args = {
+
+export const predefinedNotControlledValues = Template.bind({});
+predefinedNotControlledValues.args = {
     items,
     selectedItems,
     prePopulateWithItems: false,
+    onSelection: undefined,
     itemId: (item) => item.testId,
-    itemLabel: (item) => <span data-testid={`${item.testLabel.trim()}`}>{item.testLabel}</span>,
+    itemLabel: (item) => item.testLabel,
 };
 
 /**
  * New item creation, add to a existing list
  */
-export const newItemCreation = Template.bind({});
-newItemCreation.args = {
+export const uncontrolledNewItemCreation = Template.bind({});
+uncontrolledNewItemCreation.args = {
     items,
     createNewItemFromQuery: (query) => ({ testId: `${query}-id`, testLabel: query }),
     prePopulateWithItems: false,
@@ -88,7 +93,7 @@ newItemCreation.args = {
 const CreationTemplate: StoryFn = () => {
     const [selectedValues, setSelectedValues] = useState<string[]>([]);
 
-    const empty = useMemo<string[]>(() => [], []);
+    const items = useMemo<string[]>(() => ["foo", "bar", "baz"], []);
 
     const identity = useCallback((item: string): string => item, []);
 
@@ -100,7 +105,7 @@ const CreationTemplate: StoryFn = () => {
 
     return (
         <MultiSuggestField<string>
-            items={empty}
+            items={items}
             selectedItems={selectedValues}
             onSelection={handleOnSelect}
             itemId={identity}
@@ -114,4 +119,44 @@ const CreationTemplate: StoryFn = () => {
 /**
  * Completely create all items from quieries
  */
-export const buildItemsFromQuery = CreationTemplate.bind({});
+export const conrolledNewItemCreation = CreationTemplate.bind({});
+
+const WithResetButtonComponent = (): 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 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>
+    );
+};
+
+const WithResetButton: StoryFn = () => {
+    return <WithResetButtonComponent />;
+};
+
+/**
+ * Reset values
+ */
+export const withResetItemAndCreation = WithResetButton.bind({});

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

@@ -1,10 +1,50 @@
-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", () => {
@@ -15,25 +55,27 @@ describe("MultiSuggestField", () => {
     });
 
     it("should render default selected items", async () => {
-        const { getByTestId } = render(<MultiSuggestField {...predefinedValues.args} />);
+        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();
+            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} />);
-
-        const [firstSelected, secondSelected]: Array<string> = predefinedValues.args.selectedItems.map(
-            ({ testLabel }) => testLabel.trim()
+    it("should clear all selected items on clear button click for uncontrolled field", async () => {
+        const { container } = render(
+            <MultiSuggestField {...predefinedNotControlledValues.args} onSelection={undefined} />
         );
 
+        const selectedLength = predefinedNotControlledValues.args.selectedItems.length;
+
+        expect(container.querySelectorAll("[data-tag-index]").length).toBe(selectedLength);
+
         const clearButton = container.querySelector('[data-test-id="clear-all-items"');
 
         expect(clearButton).toBeInTheDocument();
@@ -41,8 +83,7 @@ describe("MultiSuggestField", () => {
         fireEvent.click(clearButton!);
 
         await waitFor(() => {
-            expect(queryByTestId(firstSelected)).not.toBeInTheDocument();
-            expect(queryByTestId(secondSelected)).not.toBeInTheDocument();
+            expect(container.querySelectorAll("[data-tag-index]").length).toBe(0);
         });
     });
 
@@ -96,10 +137,83 @@ describe("MultiSuggestField", () => {
     });
 
     it("should render disable field with selected items", async () => {
-        const { container } = render(<MultiSuggestField {...predefinedValues.args} disabled />);
+        const { container } = render(<MultiSuggestField {...predefinedNotControlledValues.args} disabled />);
 
         const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect__target");
 
         expect(inputTargetContainer.getAttribute("aria-disabled")).toBe("true");
     });
+
+    it("should call onSelection function with the selected items for the contolled field", 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 reset values correctly with the pre-defined values for the contolled field", async () => {
+        const { container, getByTestId } = render(<TestComponent />);
+
+        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 selectedItems = inputContainer.querySelectorAll("[data-tag-index]");
+            expect(selectedItems.length).toBe(1);
+
+            const item = menuItems[0];
+            fireEvent.click(item);
+
+            const otherItem = menuItems[menuItems.length - 1];
+            fireEvent.click(otherItem);
+
+            const selectedItemsAfterSelection = inputContainer.querySelectorAll("[data-tag-index]");
+
+            expect(selectedItemsAfterSelection.length).toBe(3);
+
+            const resetButton = getByTestId("reset-button");
+            expect(resetButton).toBeInTheDocument();
+
+            fireEvent.click(resetButton);
+        });
+
+        await waitFor(() => {
+            const selectedItemsAfterReset = inputContainer.querySelectorAll("[data-tag-index]");
+            expect(selectedItemsAfterReset.length).toBe(1);
+        });
+    });
 });

package/src/extensions/codemirror/CodeMirror.tsx

@@ -114,7 +114,7 @@ export const CodeEditor = ({
     id,
     mode = "undefined",
     preventLineNumbers = false,
-    defaultValue,
+    defaultValue = "",
     readOnly = false,
     height,
     wrapLines = false,