@sproutsocial/seeds-react-menu 0.5.0 → 0.6.0

package/src/MenuTokenInput.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import styled from "styled-components";
+import {
+  TokenInput,
+  type TypeTokenInputProps,
+  type TypeTokenSpec,
+} from "@sproutsocial/seeds-react-token-input";
+import type { TypeInternalItemProps } from "./types";
+import { MenuContentContext, MenuToggleContext } from "./MenuContext";
+
+const StyledTokenInputWrapper = styled.div`
+  > div {
+    padding: 4px;
+  }
+
+  input {
+    line-height: 21px;
+    margin: 0;
+    padding: 2px 4px;
+  }
+
+  .TokenInput-token button {
+    margin-top: 0;
+    padding: 1px 4px;
+  }
+`;
+
+export interface TypeMenuTokenInputProps extends TypeTokenInputProps {
+  /* A function that can be passed to override the default token props */
+  getTokenProps?: (
+    itemId: TypeInternalItemProps["id"]
+  ) => Partial<TypeTokenSpec>;
+  MenuContext?: typeof MenuToggleContext | typeof MenuContentContext;
+}
+
+export const MenuTokenInput = ({
+  inputProps = {},
+  getTokenProps,
+  onKeyDown,
+  MenuContext = MenuToggleContext,
+  ...tokenInputProps
+}: TypeMenuTokenInputProps) => {
+  const {
+    itemToString,
+    getSelectedItemProps,
+    removeSelectedItem,
+    setActiveIndex,
+    selectedItems = [],
+  } = React.useContext(MenuContext);
+
+  const removeToken = (tokenId: string) => {
+    const tokenToRemove = selectedItems?.find((item) => item.id === tokenId);
+    tokenToRemove && removeSelectedItem?.(tokenToRemove);
+  };
+
+  return (
+    <StyledTokenInputWrapper>
+      <TokenInput
+        onKeyDown={(e, value) => {
+          // set active index to last item when arrow left is pressed and input is empty
+          if (e.key === "ArrowLeft" && !value && selectedItems.length) {
+            setActiveIndex?.(selectedItems.length - 1);
+          }
+          onKeyDown?.(e, value);
+        }}
+        inputProps={{
+          autoComplete: "off",
+          type: "search",
+          ...inputProps,
+        }}
+        tokens={selectedItems.map((item, index) => {
+          const {
+            tokenProps: { ref, onKeyDown, ...restTokenProps } = {
+              ref: undefined,
+              onKeyDown: undefined,
+            },
+            ...rest
+          } = getTokenProps?.(item.id) || {};
+          return {
+            id: item.id,
+            value: itemToString?.(item) || item.id,
+            tokenProps: {
+              ...getSelectedItemProps?.({
+                selectedItem: item,
+                index,
+                ref,
+                refKey: "innerRef",
+                onKeyDown,
+              }),
+              // nullify the onclick provided from downshift
+              // TokenInput deletes the token on click
+              onClick: undefined,
+              tabIndex: 0,
+              ...restTokenProps,
+            },
+            ...rest,
+          };
+        })}
+        onRemoveToken={removeToken}
+        {...tokenInputProps}
+      />
+    </StyledTokenInputWrapper>
+  );
+};

package/src/MultiSelectMenu/MultiSelectMenu.stories.tsx

@@ -0,0 +1,214 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React from "react";
+
+import { Box } from "@sproutsocial/seeds-react-box";
+import type { Meta, StoryObj } from "@storybook/react";
+import { StorybookMenuToggleButton } from "../storybookUtilities/menu-storybook-components";
+import { TEST_BOOKS, EXTRA_BOOKS } from "../__fixtures__/menu-test-data";
+
+import {
+  MultiSelectMenu,
+  MenuContent,
+  MenuGroup,
+  MenuHeader,
+  MenuItem,
+  MenuSearchTokenInput,
+  type TypeInternalItemProps,
+  type TypeMultiSelectMenuProps,
+} from "../index";
+
+type TypeMultiSelectMenuStoryProps = TypeMultiSelectMenuProps & {
+  inputType: "checkbox" | "switch";
+};
+
+const meta: Meta<TypeMultiSelectMenuStoryProps> = {
+  title: "Under Development/MultiSelectMenu",
+  component: MultiSelectMenu,
+  decorators: [
+    (Story) => (
+      <Box display="flex" flexDirection="column" gap="16px" maxWidth={300}>
+        <Story />
+      </Box>
+    ),
+  ],
+  args: {
+    menuToggleElement: <StorybookMenuToggleButton />,
+  },
+  argTypes: {
+    inputType: {
+      options: ["checkbox", "switch", "radio"],
+      control: { type: "select" },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<TypeMultiSelectMenuStoryProps>;
+
+const MultiSelectMenuStory = ({ inputType, ...args }) => {
+  return (
+    <MultiSelectMenu menuToggleElement={args.menuToggleElement} {...args}>
+      <MenuContent>
+        <MenuGroup id="books">
+          {TEST_BOOKS.map((itemsToRender) => (
+            <MenuItem
+              inputType={inputType}
+              key={itemsToRender.id}
+              id={itemsToRender.id}
+            >
+              {itemsToRender.title}
+            </MenuItem>
+          ))}
+        </MenuGroup>
+      </MenuContent>
+    </MultiSelectMenu>
+  );
+};
+
+export const MultiSelectMenuExample: Story = {
+  name: "Multi select menu",
+  args: {
+    inputType: "checkbox",
+  },
+  render: (args) => <MultiSelectMenuStory {...args} />,
+};
+
+export const MultiSelectMenuWithItemsAsProps: Story = {
+  name: "With Items as Props",
+  args: {
+    inputType: "checkbox",
+  },
+  render: ({ inputType, ...args }) => {
+    const menuItems = TEST_BOOKS.map((book) => ({
+      id: book.id,
+      children: book.title,
+      inputType,
+    }));
+    return (
+      <MultiSelectMenu
+        {...args}
+        menuToggleElement={args.menuToggleElement}
+        menuItems={menuItems}
+      />
+    );
+  },
+};
+
+export const MultiSelectMenuWithGroupsExample: Story = {
+  name: "Multi select menu with groups",
+  args: {
+    inputType: "checkbox",
+  },
+  render: ({ inputType, ...args }) => {
+    return (
+      <MultiSelectMenu
+        menuToggleElement={<StorybookMenuToggleButton />}
+        {...args}
+      >
+        <MenuContent>
+          <MenuGroup title="Classics" id="classics">
+            {TEST_BOOKS.slice(0, 5).map((itemsToRender) => (
+              <MenuItem
+                inputType={inputType}
+                key={itemsToRender.id}
+                id={itemsToRender.id}
+              >
+                {itemsToRender.title}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+          <MenuGroup title="Essentials" id="essentials" isSingleSelect>
+            {EXTRA_BOOKS.slice(0, 5).map((itemsToRender) => (
+              <MenuItem
+                inputType="radio"
+                key={itemsToRender.id}
+                id={itemsToRender.id}
+              >
+                {itemsToRender.title}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </MultiSelectMenu>
+    );
+  },
+};
+
+export const MultiSelectMenuControlled: Story = {
+  name: "Controlled State",
+  args: {
+    inputType: "checkbox",
+  },
+  render: ({ inputType, ...args }) => {
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [selectedItems, setSelectedItems] = React.useState<
+      TypeInternalItemProps[]
+    >([]);
+    return (
+      <MultiSelectMenu
+        isOpen={isOpen}
+        onIsOpenChange={({ isOpen }) => setIsOpen(isOpen)}
+        selectedItems={selectedItems}
+        onSelectedItemsChange={({ selectedItems: newSelectedItems }) => {
+          setSelectedItems(newSelectedItems);
+        }}
+        menuToggleElement={<StorybookMenuToggleButton />}
+        {...args}
+      >
+        <MenuContent>
+          <MenuGroup title="Classics" id="classics">
+            {TEST_BOOKS.slice(0, 5).map((itemsToRender) => (
+              <MenuItem
+                inputType={inputType}
+                key={itemsToRender.id}
+                id={itemsToRender.id}
+              >
+                {itemsToRender.title}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+          <MenuGroup title="Essentials" id="essentials">
+            {EXTRA_BOOKS.slice(0, 5).map((itemsToRender) => (
+              <MenuItem
+                inputType={inputType}
+                key={itemsToRender.id}
+                id={itemsToRender.id}
+              >
+                {itemsToRender.title}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </MultiSelectMenu>
+    );
+  },
+};
+
+export const MultiSelectMenuWithSearch: Story = {
+  name: "With Search Token Input",
+  render: ({ inputType, ...args }) => {
+    return (
+      <MultiSelectMenu
+        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+        menuToggleElement={<StorybookMenuToggleButton />}
+        {...(args as object)}
+      >
+        <MenuHeader title="Select Book">
+          <MenuSearchTokenInput
+            id="single-select-search"
+            name="search"
+            aria-label="Search Books"
+          />
+        </MenuHeader>
+        <MenuContent>
+          {TEST_BOOKS.map(({ id, title }) => (
+            <MenuItem key={id} id={id} inputType={inputType}>
+              {title}
+            </MenuItem>
+          ))}
+        </MenuContent>
+      </MultiSelectMenu>
+    );
+  },
+};

package/src/MultiSelectMenu/MultiSelectMenu.tsx

@@ -1,39 +1,13 @@
 import React from "react";
-import {
-  useSelect,
-  useMultipleSelection,
-  type UseSelectState,
-} from "downshift";
+import { useSelect, useMultipleSelection } from "downshift";
 import { useMenuChildren } from "../hooks/useMenuChildren";
-import {
-  defaultUseSelectProps,
-  useSelectStateReducer,
-} from "../reducers/useSelectStateReducer";
-import { itemToString } from "../utils/itemToString";
-import { MenuRoot } from "../MenuRoot";
+import { useDownshiftDefaults } from "../hooks/useDownshiftDefaults";
+import { itemToString } from "../utils/downshiftDefaults";
+import { reduceReducers } from "../utils/reduceReducers";
+import { MenuRoot, type TypeMenuRootProps } from "../MenuRoot";
+import { type TypeMenuItemProps } from "../MenuItem";
 import type { TypeMultiSelectMenuProps } from "./MultiSelectMenuTypes";
-import type { TypeDefaultItemProps } from "../types";
-import { MenuItem } from "../MenuItem/index";
-
-const selectReducerForMultiSelect: TypeMultiSelectMenuProps["stateReducer"] = (
-  state,
-  actionAndChanges
-) => {
-  const { changes, type } = actionAndChanges;
-  switch (type) {
-    case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
-    case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
-    case useSelect.stateChangeTypes.ItemClick:
-      return {
-        ...changes,
-        isOpen: true, // keep the menu open after selection.
-        // TODO: Confirm that keeping highlightedIndex the same is the desired UX
-        // highlightedIndex: 0, // with the first option highlighted.
-        highlightedIndex: state.highlightedIndex, // keep highlightedIndex the same instead of returning to 0
-      };
-  }
-  return changes;
-};
+import type { TypeInternalItemProps } from "../types";
 
 /**
  * @link https://seeds.sproutsocial.com/components/multiselect-menu/
@@ -43,35 +17,36 @@ const selectReducerForMultiSelect: TypeMultiSelectMenuProps["stateReducer"] = (
  * @see {@link https://seeds.sproutsocial.com/components/menu-group/ | MenuGroup}
  */
 
-export const MultiSelectMenu = ({
+export const MultiSelectMenu = <
+  I extends TypeMenuItemProps = TypeMenuItemProps
+>({
   children: childrenProp,
-  items,
-  MenuItemComponent = MenuItem,
+  menuItems,
+  MenuItemComponent,
+  onSelectedItemChange: externalOnSelectedItemChange,
   stateReducer: externalStateReducer,
   getA11yMultiStatusMessage,
   onMultiSelectStateChange,
   multiSelectStateReducer,
   ...useSelectProps
-}: TypeMultiSelectMenuProps) => {
+}: TypeMultiSelectMenuProps<I>) => {
   const { allMenuItems, menuItemsMap, children } = useMenuChildren({
     children: childrenProp,
-    items,
+    menuItems,
     MenuItemComponent,
   });
+  const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
+    isCombobox: false,
+    isMulti: true,
+    // handles the prop name mapping for multi select
+    multiSelectProps: {
+      getA11yMultiStatusMessage,
+      onMultiSelectStateChange,
+      multiSelectStateReducer,
+      ...useSelectProps,
+    },
+  });
 
-  const multiSelectOverrides = Object.entries({
-    ...useSelectProps,
-    getA11yStatusMessage: getA11yMultiStatusMessage,
-    onStateChange: onMultiSelectStateChange,
-    stateReducer: multiSelectStateReducer,
-  }).reduce(
-    (a, [k, v]) => (v ? ((a[k] = v), a) : a),
-    {} as {
-      getA11yStatusMessage?: TypeMultiSelectMenuProps["getA11yMultiStatusMessage"];
-      onStateChange?: TypeMultiSelectMenuProps["onMultiSelectStateChange"];
-      stateReducer?: TypeMultiSelectMenuProps["multiSelectStateReducer"];
-    }
-  );
   const {
     getSelectedItemProps,
     addSelectedItem,
@@ -79,29 +54,20 @@ export const MultiSelectMenu = ({
     selectedItems,
     getDropdownProps,
     ...useMultipleSelectionReturnProps
-  } = useMultipleSelection<TypeDefaultItemProps>(multiSelectOverrides);
+  } = useMultipleSelection<TypeInternalItemProps>(defaultDownshiftProps.multi);
 
   const { isOpen, ...useSelectReturnProps } = useSelect({
-    ...defaultUseSelectProps,
+    ...defaultDownshiftProps.select,
     items: allMenuItems,
     itemToString,
     selectedItem: null,
     defaultHighlightedIndex: 0,
-    stateReducer: (state, actionAndChanges) => {
-      let newState: Partial<UseSelectState<TypeDefaultItemProps>>;
-      newState = useSelectStateReducer(state, actionAndChanges);
-      newState = selectReducerForMultiSelect(state, {
-        ...actionAndChanges,
-        changes: newState,
-      });
-      return externalStateReducer
-        ? externalStateReducer(state, {
-            ...actionAndChanges,
-            changes: newState,
-          })
-        : newState;
-    },
-    onStateChange: ({ type, selectedItem: newSelectedItem }) => {
+    stateReducer: reduceReducers(
+      defaultDownshiftProps.select.stateReducer,
+      externalStateReducer
+    ),
+    onSelectedItemChange: (changes) => {
+      const { type, selectedItem: newSelectedItem } = changes;
       switch (type) {
         case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
         case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
@@ -124,6 +90,9 @@ export const MultiSelectMenu = ({
         default:
           break;
       }
+
+      // Call the consumer's onSelectedItemChange callback
+      externalOnSelectedItemChange?.(changes);
     },
     ...useSelectProps,
   });
@@ -147,6 +116,7 @@ export const MultiSelectMenu = ({
         ...useSelectProps,
         ...useSelectReturnProps,
         ...useMultipleSelectionReturnProps,
+        ...restDefaults,
       }}
     >
       {children}

package/src/MultiSelectMenu/MultiSelectMenuTypes.ts

@@ -1,14 +1,16 @@
-import type { TypeMenuRootOwnProps } from "../MenuRoot";
+import type { TypeMenuRootOwnProps, TypeMenuRootProps } from "../MenuRoot";
 import type {
   TypeDownshiftSelectProps,
   TypeDownshiftMultiSelectProps,
 } from "../MenuContext";
+import type { TypeMenuItemProps } from "../MenuItem";
 import type { TypeChildrenOrItems } from "../types";
 
-interface TypeMultiSelectMenuBaseProps
+export interface TypeMultiSelectMenuBaseProps
   extends TypeMenuRootOwnProps,
-    Omit<TypeDownshiftSelectProps, "items">,
-    Omit<TypeDownshiftMultiSelectProps, "items"> {}
+    TypeDownshiftSelectProps,
+    TypeDownshiftMultiSelectProps {}
 
-export type TypeMultiSelectMenuProps = TypeMultiSelectMenuBaseProps &
-  TypeChildrenOrItems;
+export type TypeMultiSelectMenuProps<
+  I extends TypeMenuItemProps = TypeMenuItemProps
+> = TypeMultiSelectMenuBaseProps & TypeChildrenOrItems<I>;

package/src/MultiSelectMenu/__tests__/MultiSelectMenu.test.tsx

@@ -11,6 +11,7 @@ import {
   screen,
   cleanup,
   waitFor,
+  act,
 } from "@sproutsocial/seeds-react-testing-library";
 
 const menuItems = [
@@ -53,7 +54,9 @@ describe("MultiSelectMenu", () => {
 
     const toggleButton = screen.getByRole("button", { name: "testable menu" });
 
-    await user.click(toggleButton);
+    await act(async () => {
+      await user.click(toggleButton);
+    });
 
     const item1 = screen.getByRole("option", { name: "Item 1" });
     const item2 = screen.getByRole("option", { name: "Item 2" });
@@ -64,7 +67,9 @@ describe("MultiSelectMenu", () => {
     });
 
     // Select first item
-    await user.click(item1);
+    await act(async () => {
+      await user.click(item1);
+    });
 
     await waitFor(() => {
       // Check that the first item is selected
@@ -72,7 +77,9 @@ describe("MultiSelectMenu", () => {
     });
 
     // Select second item
-    await user.click(item2);
+    await act(async () => {
+      await user.click(item2);
+    });
 
     await waitFor(() => {
       // Check that the second item is selected
@@ -112,7 +119,9 @@ describe("MultiSelectMenu", () => {
     const toggleButton = screen.getByRole("button", { name: "testable menu" });
 
     // Open Menu
-    await user.click(toggleButton);
+    await act(async () => {
+      await user.click(toggleButton);
+    });
 
     const item1 = screen.getByRole("option", { name: "Item 1" });
 
@@ -121,14 +130,18 @@ describe("MultiSelectMenu", () => {
     });
 
     // Select Item 1
-    await user.click(item1);
+    await act(async () => {
+      await user.click(item1);
+    });
 
     await waitFor(() => {
       expect(item1).toHaveAttribute("aria-selected", "true");
     });
 
     // Close Menu (MultiSelect does not close automatically)
-    await user.click(toggleButton);
+    await act(async () => {
+      await user.click(toggleButton);
+    });
 
     // Make sure the menu is closed
     await waitFor(() =>
@@ -136,7 +149,9 @@ describe("MultiSelectMenu", () => {
     );
 
     // Open menu again
-    await user.click(toggleButton);
+    await act(async () => {
+      await user.click(toggleButton);
+    });
 
     // Make sure the menu is open
     await waitFor(() =>
@@ -173,22 +188,30 @@ describe("MultiSelectMenu", () => {
     );
 
     // Open Menu
-    await user.keyboard("{Tab}{Enter}");
+    await act(async () => {
+      await user.keyboard("{Tab}{Enter}");
+    });
     expect(await screen.findByRole("listbox")).toBeInTheDocument();
 
     // Check that the first item is highlighted
-    await user.keyboard("{ArrowDown}");
+    await act(async () => {
+      await user.keyboard("{ArrowDown}");
+    });
     expect(screen.getByRole("listbox")).toHaveAttribute(
       "aria-activedescendant",
       screen.getByRole("option", { name: "Item 1" }).getAttribute("id")
     );
 
     // Select the first item
-    await user.keyboard("{Enter}");
+    await act(async () => {
+      await user.keyboard("{Enter}");
+    });
 
     // select the second item
-    await user.keyboard("{ArrowDown}");
-    await user.keyboard(" ");
+    await act(async () => {
+      await user.keyboard("{ArrowDown}");
+      await user.keyboard(" ");
+    });
 
     // Check that the second item is highlighted and selected
     const item2 = screen.getByRole("option", { name: "Item 2" });
@@ -237,7 +260,9 @@ describe("MultiSelectMenu", () => {
     });
 
     // Open Menu
-    await user.click(toggleButton);
+    await act(async () => {
+      await user.click(toggleButton);
+    });
 
     const item1 = screen.getByRole("option", { name: "Item 1" });
     const item2 = screen.getByRole("option", { name: "Item 2" });
@@ -290,7 +315,9 @@ describe("MultiSelectMenu", () => {
     });
 
     // Open Menu
-    await user.click(toggleButton);
+    await act(async () => {
+      await user.click(toggleButton);
+    });
 
     const item1 = screen.getByRole("option", { name: "Item 1" });
 
@@ -299,12 +326,14 @@ describe("MultiSelectMenu", () => {
     });
 
     // Select Item 1
-    await user.click(item1);
+    await act(async () => {
+      await user.click(item1);
+    });
 
     // Check that the menu is still open
     expect(await screen.findByRole("listbox")).toBeInTheDocument();
 
-    // Check that callback called
-    expect(mockSelectedItemsChange).toHaveBeenCalledTimes(1);
+    // Check that callback was called at least once
+    expect(mockSelectedItemsChange).toHaveBeenCalled();
   });
 });

package/src/MultiSelectMenu/__tests__/MultiSelectMenu.typetest.tsx

@@ -21,15 +21,15 @@ export const MultiSelectMenuTypeTest = () => (
       <MenuContent>Test</MenuContent>
       <MenuFooter>Test</MenuFooter>
     </MultiSelectMenu>
-    {/* Valid MultiSelectMenu allows items to be passed using the items prop */}
+    {/* Valid MultiSelectMenu allows menuItems to be passed using the menuItems prop */}
     <MultiSelectMenu
       menuToggleElement={<>test</>}
-      items={[{ children: "Item Name", id: "item-1" }]}
+      menuItems={[{ children: "Item Name", id: "item-1" }]}
     />
-    {/* Valid MultiSelectMenu allows items prop to be rendered using a MenuItemComponent prop */}
+    {/* Valid MultiSelectMenu allows menuItems prop to be rendered using a MenuItemComponent prop */}
     <MultiSelectMenu
       menuToggleElement={<>test</>}
-      items={[{ children: "Item Name", id: "item-1" }]}
+      menuItems={[{ children: "Item Name", id: "item-1" }]}
       MenuItemComponent={MenuItem}
     />
     {/* Valid MultiSelectMenu accepts Downshift props and functions for useSelect */}
@@ -70,8 +70,8 @@ export const MultiSelectMenuTypeTest = () => (
     <MultiSelectMenu menuToggleElement={<>test</>} MenuItemComponent={MenuItem}>
       Children
     </MultiSelectMenu>
-    {/* @ts-expect-error - when both children and items provided */}
-    <MultiSelectMenu menuToggleElement={<>test</>} items={[]}>
+    {/* @ts-expect-error - when both children and menuItems provided */}
+    <MultiSelectMenu menuToggleElement={<>test</>} menuItems={[]}>
       Children
     </MultiSelectMenu>
     <MultiSelectMenu