@sproutsocial/seeds-react-menu 1.6.2 → 1.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "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/MultiAutocomplete.tsx

@@ -38,6 +38,7 @@ export const MultiAutocomplete = <
   onMultiSelectStateChange,
   multiSelectStateReducer,
   autoCloseOnEmpty = true,
+  selectedItems: selectedItemsProp,
   ...useComboboxProps
 }: TypeMultiAutocompleteProps<I>) => {
   /** Get a list of menuItems and children */
@@ -46,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>(
@@ -109,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 });
     },
@@ -139,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,
@@ -162,16 +163,8 @@ export const MultiAutocomplete = <
     ...useComboboxProps,
   });
 
-  const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
   const { popoutProps: userPopoutProps } = useComboboxProps;
 
-  React.useEffect(() => {
-    if (!inputValue) return;
-    if (allMenuItems && hiddenItemsCount >= allMenuItems.length && isOpen) {
-      closeMenu?.();
-    }
-  }, [hiddenItemsCount, allMenuItems?.length, isOpen, inputValue]);
-
   return (
     <MenuRootComponent
       {...{