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

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,44 @@ 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 we get new selected items from outside
+     */
+    React.useEffect(() => {
+        if (!externalSelectedItems) {
+            return;
+        }
+
+        setSelectedItems(externalSelectedItems);
+    }, [externalSelectedItems]);
+
     /**
      * using the equality prop specified checks if an item has already been selected
      * @param matcher
@@ -232,7 +253,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 +273,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 +303,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 +320,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 +337,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 +357,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 +375,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 +385,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 +396,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 +463,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

@@ -2,23 +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";
-
-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>
-);
+import { MultiSelectSelectionProps, MultiSuggestField, SimpleDialog } from "./../../../index";
 
 const testLabels = loremIpsum({
     p: 1,
@@ -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,56 @@ 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,
+};
+
+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
  */
-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 +127,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 +139,7 @@ const CreationTemplate: StoryFn = () => {
 
     return (
         <MultiSuggestField<string>
-            items={empty}
+            items={items}
             selectedItems={selectedValues}
             onSelection={handleOnSelect}
             itemId={identity}
@@ -114,4 +153,85 @@ 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({});
+
+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({});