@sproutsocial/seeds-react-menu 1.6.1 → 1.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/Autocomplete/Autocomplete.stories.tsx

@@ -20,6 +20,7 @@ import { TEST_BOOKS } from "../__fixtures__/menu-test-data";
 import { Autocomplete } from "./Autocomplete";
 import { AutocompleteInput } from "./AutocompleteInput";
 import { AutocompleteTokenInput } from "./AutocompleteTokenInput";
+import Button from "@sproutsocial/seeds-react-button";
 
 type CustomAutocompleteArgs = React.ComponentProps<typeof Autocomplete>;
 
@@ -220,7 +221,6 @@ export const AutocompleteControlled: Story = {
 };
 
 const TestControlledMultiAutocomplete = (args: CustomAutocompleteArgs) => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [selectedItems, setSelectedItems] = React.useState<
     TypeInternalItemProps[]
   >([]);
@@ -228,8 +228,6 @@ const TestControlledMultiAutocomplete = (args: CustomAutocompleteArgs) => {
   return (
     <Autocomplete
       multiSelect
-      isOpen={isOpen}
-      onIsOpenChange={({ isOpen }) => setIsOpen(isOpen)}
       selectedItems={selectedItems}
       onSelectedItemsChange={({ selectedItems: newSelectedItems }) =>
         setSelectedItems(newSelectedItems)
@@ -259,9 +257,68 @@ const TestControlledMultiAutocomplete = (args: CustomAutocompleteArgs) => {
   );
 };
 
+const TestControlledMultiAutocompleteWithExternalButton = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [selectedItems, setSelectedItems] = React.useState<
+    TypeInternalItemProps[]
+  >([]);
+
+  const handleSetSelectedItems = ({ selectedItems: newSelectedItems }) => {
+    setSelectedItems(newSelectedItems);
+  };
+
+  const handleAddRandom = () => {
+    const randomItem = {
+      id: "book-3",
+      index: 2,
+      menuItemProps: {
+        children: "The Idiot",
+        id: "book-3",
+      },
+    };
+    setSelectedItems((prev) => [...prev, randomItem]);
+    console.log("random thing");
+  };
+
+  return (
+    <>
+      <Autocomplete
+        multiSelect
+        isOpen={isOpen}
+        onIsOpenChange={({ isOpen }) => setIsOpen(isOpen)}
+        selectedItems={selectedItems}
+        onSelectedItemsChange={handleSetSelectedItems}
+        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+        menuToggleElement={
+          <>
+            <MenuLabel mb={300}>Choose a book</MenuLabel>
+            <AutocompleteTokenInput />
+          </>
+        }
+      >
+        <MenuContent>
+          <MenuGroup id="books">
+            {TEST_BOOKS.map(({ id, title }) => (
+              <MenuItem key={id} id={id}>
+                {title}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </Autocomplete>
+      <Button onClick={handleAddRandom}>Add Random thing</Button>
+    </>
+  );
+};
+
 export const MultiAutocompleteControlled: Story = {
   name: "MultiAutocomplete Controlled State",
   render: (args: CustomAutocompleteArgs) => (
     <TestControlledMultiAutocomplete {...args} />
   ),
 };
+
+export const MultiAutocompleteControlledWithExternal: Story = {
+  name: "MultiAutocomplete Controlled State With External Button",
+  render: () => <TestControlledMultiAutocompleteWithExternalButton />,
+};

package/src/Autocomplete/AutocompleteTypes.ts

@@ -16,6 +16,7 @@ export type TypeBaseAutocompleteProps = TypeHigherOrderComponentProps &
     /** Set multiSelect to true to allow multiple selections.
      *  Default: false*/
     multiSelect?: boolean;
+    autoCloseOnEmpty?: boolean;
   };
 
 export type TypeSingleAutocompleteProps<

package/src/Autocomplete/MultiAutocomplete.tsx

@@ -37,6 +37,8 @@ export const MultiAutocomplete = <
   getA11yMultiStatusMessage,
   onMultiSelectStateChange,
   multiSelectStateReducer,
+  autoCloseOnEmpty = true,
+  selectedItems: selectedItemsProp,
   ...useComboboxProps
 }: TypeMultiAutocompleteProps<I>) => {
   /** Get a list of menuItems and children */
@@ -45,11 +47,16 @@ export const MultiAutocomplete = <
     menuItems,
     MenuItemComponent,
   });
-  const [selectedItems, setSelectedItems] =
+  const [selectedItemsState, setSelectedItemsState] =
     React.useState(initialSelectedItems);
-  const [selectedItemIds, setSelectedItemIds] = React.useState<
-    Record<string, boolean>
-  >(getSelectedItemIds(initialSelectedItems));
+  const selectedItems = React.useMemo(
+    () => selectedItemsProp || selectedItemsState,
+    [selectedItemsProp, selectedItemsState]
+  );
+  const selectedItemIds = React.useMemo(
+    () => getSelectedItemIds(selectedItems),
+    [selectedItems]
+  );
 
   // function that checks that item should be visible based on the selected items
   const getIsItemVisibleMulti = React.useCallback<typeof getIsItemVisible>(
@@ -108,10 +115,9 @@ export const MultiAutocomplete = <
   const useMultipleSelectionReturnProps = useMultipleSelection({
     ...defaultDownshiftProps.multi,
     itemToKey,
-    selectedItems,
+    selectedItems: selectedItemsProp || selectedItems,
     onSelectedItemsChange: ({ selectedItems, ...changes }) => {
-      setSelectedItems(selectedItems);
-      setSelectedItemIds(getSelectedItemIds(selectedItems));
+      setSelectedItemsState(selectedItems);
       onSelectedItemsChange &&
         onSelectedItemsChange({ selectedItems, ...changes });
     },
@@ -138,11 +144,7 @@ export const MultiAutocomplete = <
         case useCombobox.stateChangeTypes.ItemClick:
           if (newSelectedItem) {
             const newSelectedItems = [...selectedItems, newSelectedItem];
-            setSelectedItems(newSelectedItems);
-            setSelectedItemIds({
-              ...selectedItemIds,
-              [newSelectedItem.id]: true,
-            });
+            setSelectedItemsState(newSelectedItems);
             onSelectedItemsChange &&
               onSelectedItemsChange({
                 selectedItems: newSelectedItems,
@@ -175,6 +177,7 @@ export const MultiAutocomplete = <
     <MenuRootComponent
       {...{
         isListbox: true,
+        autoCloseOnEmpty,
         items: allMenuItems,
         itemToString,
         initialSelectedItems,
@@ -192,7 +195,6 @@ export const MultiAutocomplete = <
         focusOnContent: false,
         ...userPopoutProps,
       }}
-      autoCloseOnEmpty
     >
       {children}
     </MenuRootComponent>

package/src/Autocomplete/SingleAutocomplete.tsx

@@ -20,6 +20,7 @@ export const SingleAutocomplete = <
   MenuItemComponent,
   itemToString = defaultItemToString,
   getIsItemVisible,
+  autoCloseOnEmpty = true,
   ...useComboboxProps
 }: TypeSingleAutocompleteProps<I>) => {
   /** Get a list of menuItems and children */
@@ -63,6 +64,7 @@ export const SingleAutocomplete = <
     <MenuRootComponent
       {...{
         isListbox: true,
+        autoCloseOnEmpty,
         items: allMenuItems,
         itemToString,
         ...useComboboxProps,
@@ -73,7 +75,6 @@ export const SingleAutocomplete = <
         focusOnContent: false,
         ...userPopoutProps,
       }}
-      autoCloseOnEmpty
     >
       {children}
     </MenuRootComponent>

package/src/Autocomplete/__tests__/Autocomplete.test.tsx

@@ -174,7 +174,7 @@ describe("Autocomplete Component", () => {
     expect(customFilter).toHaveBeenCalled();
   });
 
-  it("should close the dropdown when no items match the input", async () => {
+  it("should close the dropdown when no items match the input by default", async () => {
     const { user } = render(<Autocomplete {...defaultAutocompleteProps} />);
     const inputElement = screen.getByRole("combobox");
 
@@ -184,11 +184,26 @@ describe("Autocomplete Component", () => {
     });
 
     await waitFor(() => {
-      const listbox = screen.queryByRole("listbox");
-      expect(listbox).not.toBeInTheDocument();
+      const emptyState = screen.queryByText("No items found");
+      expect(emptyState).not.toBeInTheDocument();
     });
   });
 
+  it("should not close the dropdown when no items match the input if supplied autoCloseOnEmpty={false}", async () => {
+    const { user } = render(
+      <Autocomplete {...defaultAutocompleteProps} autoCloseOnEmpty={false} />
+    );
+    const inputElement = screen.getByRole("combobox");
+
+    await act(async () => {
+      await user.click(inputElement);
+      await user.type(inputElement, "something not in the list");
+    });
+
+    const emptyState = screen.getByText("No items found");
+    expect(emptyState).toBeInTheDocument();
+  });
+
   it("should apply custom popoutProps.width to the popout container", async () => {
     const { user } = render(
       <Autocomplete