@sproutsocial/seeds-react-menu 0.5.0 → 1.0.0

package/src/MenuToggleButton/MenuToggleButton.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "@sproutsocial/seeds-react-box";
+
+import { TEST_BOOKS } from "../__fixtures__/menu-test-data";
+import {
+  MenuItem,
+  SingleSelectMenu,
+  MenuToggleButton,
+  MenuContent,
+} from "../index";
+
+const meta: Meta<typeof MenuToggleButton> = {
+  title: "Under Development/Primitives/MenuToggleButton",
+  component: MenuToggleButton,
+  decorators: [
+    (Story) => (
+      <Box display="flex" flexDirection="column" gap="16px" maxWidth={300}>
+        <Story />
+      </Box>
+    ),
+  ],
+  argTypes: {
+    appearance: {
+      description: "All Button props are available",
+      options: [
+        "primary",
+        "secondary",
+        "pill",
+        "destructive",
+        "unstyled",
+        "placeholder",
+      ],
+      control: { type: "select" },
+    },
+  },
+  args: {
+    appearance: "primary",
+    disabled: false,
+    size: "default",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuToggleButton>;
+
+export const MenuTriggerOptions: Story = {
+  name: "Menu Trigger",
+
+  render: function MenuTriggerOptions(args) {
+    return (
+      <SingleSelectMenu
+        defaultIsOpen
+        initialIsOpen={false}
+        menuToggleElement={
+          <MenuToggleButton {...args} appearance={args.appearance}>
+            Select a book &#8595;
+          </MenuToggleButton>
+        }
+      >
+        <MenuContent>
+          {TEST_BOOKS.map((book) => {
+            return (
+              <MenuItem key={book.id} id={book.id}>
+                {book.title}
+              </MenuItem>
+            );
+          })}
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+  },
+};

package/src/{MenuToggleButton.tsx → MenuToggleButton/MenuToggleButton.tsx}

@@ -1,6 +1,6 @@
-import React, { type ReactNode, useContext } from "react";
+import React, { type ReactNode } from "react";
 import { Button, type TypeButtonProps } from "@sproutsocial/seeds-react-button";
-import { MenuContext } from "./MenuContext";
+import { useMenuToggleContext } from "../MenuContext";
 
 export interface TypeMenuToggleButtonProps extends Partial<TypeButtonProps> {
   children: ReactNode;
@@ -10,15 +10,16 @@ export const MenuToggleButton = ({
   children,
   ...rest
 }: TypeMenuToggleButtonProps) => {
-  const { getToggleButtonProps, isListbox, getDropdownProps } =
-    useContext(MenuContext);
+  const { getToggleButtonProps, isListbox, getDropdownProps, ref, ariaProps } =
+    useMenuToggleContext();
   return (
     <Button
       appearance="secondary"
       {...getToggleButtonProps?.({
         // Decide if we want the preventKeyAction stuff. Maybe create a prop to allow for this to be overriden.
-        ...getDropdownProps?.({ preventKeyAction: true }),
+        ...(getDropdownProps?.({ ref, preventKeyAction: true }) || { ref }),
         refKey: "innerRef",
+        ...ariaProps,
         ...(isListbox ? {} : { role: "button", "aria-haspopup": "menu" }),
       })}
       {...rest}

package/src/MenuToggleButton/index.ts

@@ -0,0 +1 @@
+export * from "./MenuToggleButton";

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,222 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React from "react";
+
+import { Box } from "@sproutsocial/seeds-react-box";
+import { action } from "@storybook/addon-actions";
+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,
+  type TypeMultiSelectMenuBaseProps,
+} 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>
+    );
+  },
+};
+
+const TestControlledMultiSelectMenu = ({
+  inputType,
+  ...args
+}: TypeMultiSelectMenuBaseProps & {
+  inputType: "checkbox" | "switch";
+}) => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [selectedItems, setSelectedItems] = React.useState<
+    TypeInternalItemProps[]
+  >([]);
+  return (
+    <MultiSelectMenu
+      {...args}
+      isOpen={isOpen}
+      onIsOpenChange={({ isOpen }) => setIsOpen(isOpen)}
+      selectedItems={selectedItems}
+      onSelectedItemsChange={({ selectedItems: newSelectedItems }) => {
+        setSelectedItems(newSelectedItems);
+      }}
+      menuToggleElement={<StorybookMenuToggleButton />}
+    >
+      <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 MultiSelectMenuControlled: Story = {
+  name: "Controlled State",
+  args: {
+    inputType: "checkbox",
+  },
+  render: (args) => <TestControlledMultiSelectMenu {...args} />,
+};
+
+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>;