@sproutsocial/seeds-react-menu 0.4.1 → 0.6.0

package/src/ActionMenu/__tests__/ActionMenu.typetest.tsx

@@ -1,4 +1,10 @@
-import { ActionMenu, MenuContent, MenuHeader, MenuFooter } from "../../index";
+import {
+  ActionMenu,
+  MenuContent,
+  MenuHeader,
+  MenuFooter,
+  MenuItem,
+} from "../../index";
 
 export const ActionMenuTypeTest = () => (
   <>
@@ -14,6 +20,17 @@ export const ActionMenuTypeTest = () => (
       <MenuContent>Test</MenuContent>
       <MenuFooter>Test</MenuFooter>
     </ActionMenu>
+    {/* Valid ActionMenu allows menuItems to be passed using the menuItems prop */}
+    <ActionMenu
+      menuToggleElement={<>test</>}
+      menuItems={[{ children: "Item Name", id: "item-1" }]}
+    />
+    {/* Valid ActionMenu allows menuItems prop to be rendered using a MenuItemComponent prop */}
+    <ActionMenu
+      menuToggleElement={<>test</>}
+      menuItems={[{ children: "Item Name", id: "item-1" }]}
+      MenuItemComponent={MenuItem}
+    />
     {/* Valid ActionMenu accepts Downshift props and functions for useSelect other than selectedItem */}
     <ActionMenu
       menuToggleElement={<>test</>}
@@ -34,8 +51,20 @@ export const ActionMenuTypeTest = () => (
     >
       Test
     </ActionMenu>
-    {/* @ts-expect-error - when no children provided */}
-    <ActionMenu menuToggleElement="test" />
+    {/* @ts-expect-error - when both children and MenuItemComponent provided */}
+    <ActionMenu menuToggleElement={<>test</>} MenuItemComponent={MenuItem}>
+      Children
+    </ActionMenu>
+    {/* @ts-expect-error - when both children and menuItems provided */}
+    <ActionMenu menuToggleElement={<>test</>} menuItems={[]}>
+      Children
+    </ActionMenu>
+    {/* @ts-expect-error - when no children or items provided */}
+    <ActionMenu menuToggleElement={<>test</>} />
+    {/* @ts-expect-error - when MenuItemComponent is of the wrong type */}
+    <ActionMenu menuToggleElement={<>test</>} MenuItemComponent={MenuContent}>
+      Children
+    </ActionMenu>
 
     <ActionMenu
       menuToggleElement={<>test</>}

package/src/Autocomplete/Autocomplete.stories.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
 
 import { Box } from "@sproutsocial/seeds-react-box";
 import { Icon } from "@sproutsocial/seeds-react-icon";
@@ -10,6 +11,7 @@ import { TEST_BOOKS } from "../__fixtures__/menu-test-data";
 
 import { Autocomplete } from "./Autocomplete";
 import { AutocompleteInput } from "./AutocompleteInput";
+import { AutocompleteTokenInput } from "./AutocompleteTokenInput";
 
 type CustomAutocompleteArgs = React.ComponentProps<typeof Autocomplete>;
 
@@ -23,7 +25,7 @@ const meta: Meta<CustomAutocompleteArgs> = {
   },
   decorators: [
     (Story) => (
-      <Box display="flex" flexDirection="column" gap="16px" maxWidth={300}>
+      <Box display="flex" flexDirection="column" gap="16px" maxWidth={350}>
         <Story />
       </Box>
     ),
@@ -62,6 +64,30 @@ export const AutocompleteTextInputExample: Story = {
   },
 };
 
+export const AutocompleteWithItemsAsProps: Story = {
+  name: "With Items as Props",
+  render: (args) => {
+    return (
+      <Autocomplete
+        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+        menuToggleElement={
+          <>
+            <MenuLabel htmlFor="my-combobox" mb={300}>
+              Choose a book
+            </MenuLabel>
+            <AutocompleteInput />
+          </>
+        }
+        menuItems={TEST_BOOKS.map(({ id, title }) => ({
+          children: title,
+          id,
+        }))}
+        {...(args as object)}
+      />
+    );
+  },
+};
+
 export const AutocompleteTextWithButtonExample: Story = {
   name: "Text Input w/ Button",
   render: (args) => {
@@ -95,12 +121,45 @@ export const AutocompleteTextWithButtonExample: Story = {
   },
 };
 
+export const AutocompleteTokenInputExample: Story = {
+  name: "Token Input w/ Button",
+  render: (args) => {
+    return (
+      <Autocomplete
+        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+        menuToggleElement={
+          <>
+            <MenuLabel htmlFor="my-combobox" mb={300}>
+              Choose a book
+            </MenuLabel>
+            <AutocompleteTokenInput />
+            <MenuToggleButton mt={200} width="100%" p="0">
+              <Icon name="chevron-down" aria-label="Open Menu" />
+            </MenuToggleButton>
+          </>
+        }
+        onStateChange={(changes) => action("onStateChange")(changes)}
+        multiSelect
+        {...(args as object)}
+      >
+        <MenuContent>
+          {TEST_BOOKS.map(({ id, title }) => (
+            <MenuItem key={id} id={id}>
+              {title}
+            </MenuItem>
+          ))}
+        </MenuContent>
+      </Autocomplete>
+    );
+  },
+};
+
 // export const AutocompleteControlled: Story = {
 //   name: "Controlled State",
 //   render: ({ inputType, ...args }) => {
 //     const [isOpen, setIsOpen] = React.useState<boolean>(false);
 //     const [selectedItem, setSelectedItem] =
-//       React.useState<TypeDefaultItemProps | null>(null);
+//       React.useState<TypeInternalItemProps | null>(null);
 //     return (
 //       <Autocomplete
 //         isOpen={isOpen}

package/src/Autocomplete/Autocomplete.tsx

@@ -1,83 +1,24 @@
 import React from "react";
-import { useCombobox, type UseComboboxState } from "downshift";
-import { useItemsFromChildren } from "../hooks/useItemsFromChildren";
-import {
-  defaultUseComboboxProps,
-  useComboboxStateReducer,
-} from "../reducers/useComboboxStateReducer";
-import { itemToString as defaultItemToString } from "../utils/itemToString";
-import { MenuRoot } from "../MenuRoot";
+
+import type { TypeMenuItemProps } from "../MenuItem";
+import type { TypeMenuRootProps } from "../MenuRoot";
 import type { TypeAutocompleteProps } from "./AutocompleteTypes";
-import type { TypeDefaultItemProps } from "../types";
+import { SingleAutocomplete } from "./SingleAutocomplete";
+import { MultiAutocomplete } from "./MultiAutocomplete";
 
 /**
- * @link https://seeds.sproutsocial.com/components/multiselect-menu/
+ * @link https://seeds.sproutsocial.com/components/autocomplete/
  *
- * @description A Autocomplete allows multiple {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MenuItem | MenuItems} to be selected from a list or groups of lists.
+ * @description A Autocomplete allows selecting a {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MenuItem | MenuItems} to be selected from a list or groups of lists to populate an input.
  *
- * @see {@link https://seeds.sproutsocial.com/components/menu-group/ | MenuGroup}
  */
+export const Autocomplete = <I extends TypeMenuItemProps = TypeMenuItemProps>({
+  multiSelect,
+  ...rest
+}: TypeAutocompleteProps<I>) => {
+  if (multiSelect) {
+    return <MultiAutocomplete {...rest} />;
+  }
 
-export const Autocomplete = ({
-  children,
-  stateReducer: externalStateReducer,
-  itemToString = defaultItemToString,
-  getIsItemVisible = (item, inputValue) =>
-    itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase()),
-  ...useComboboxProps
-}: TypeAutocompleteProps) => {
-  /** Get a list of items from the children */
-  const { allMenuItems } = useItemsFromChildren({ children });
-  const [items, setItems] = React.useState(allMenuItems);
-
-  /**
-   * Destructure Downshift props and call the core useCombobox with items and state handler
-   */
-  const { isOpen, ...useComboboxReturnProps } = useCombobox({
-    ...defaultUseComboboxProps,
-    items,
-    itemToString,
-    onInputValueChange({ inputValue }) {
-      setItems(
-        inputValue
-          ? allMenuItems.reduce(
-              (items, item) => [
-                ...items,
-                { ...item, hidden: !getIsItemVisible(item, inputValue) },
-              ],
-              [] as TypeDefaultItemProps[]
-            )
-          : allMenuItems
-      );
-    },
-    stateReducer: (state, actionAndChanges) => {
-      let newState: Partial<UseComboboxState<TypeDefaultItemProps>>;
-      newState = useComboboxStateReducer(state, actionAndChanges);
-      return externalStateReducer
-        ? externalStateReducer(state, {
-            ...actionAndChanges,
-            changes: newState,
-          })
-        : newState;
-    },
-    ...useComboboxProps,
-  });
-
-  return (
-    <MenuRoot
-      {...{
-        isListbox: true,
-        items,
-        itemToString,
-        isOpen,
-        ...useComboboxProps,
-        ...useComboboxReturnProps,
-      }}
-      popoutProps={{
-        focusOnContent: false,
-      }}
-    >
-      {children}
-    </MenuRoot>
-  );
+  return <SingleAutocomplete {...rest} />;
 };

package/src/Autocomplete/AutocompleteInput.tsx

@@ -1,21 +1,10 @@
 import { useContext } from "react";
-import type {
-  UseComboboxGetInputPropsOptions,
-  GetInputPropsReturnValue,
-} from "downshift";
 import { Input, type TypeInputProps } from "@sproutsocial/seeds-react-input";
-import { MenuContext } from "../MenuContext";
+import type { TypeDownshiftMergedInputProps } from "../types";
+import { useMenuToggleContext } from "../MenuContext";
 
-type TypeInputEventListeners =
-  | "onKeyDown"
-  | "onChange"
-  | "onInput"
-  | "onBlur"
-  | "onClick"
-  | "refKey";
 export interface TypeAutocompleteInputProps
-  extends Pick<UseComboboxGetInputPropsOptions, TypeInputEventListeners>,
-    Omit<Partial<TypeInputProps>, TypeInputEventListeners> {}
+  extends TypeDownshiftMergedInputProps<TypeInputProps> {}
 
 export const AutocompleteInput = ({
   onKeyDown,
@@ -26,23 +15,25 @@ export const AutocompleteInput = ({
   inputProps,
   ...rest
 }: TypeAutocompleteInputProps) => {
-  const { getInputProps, inputValue } = useContext(MenuContext);
+  const { getInputComponentProps, inputValue, ref, ariaProps } =
+    useMenuToggleContext();
+
   return (
     <Input
       id="autocomplete_input"
       name="autocomplete_input"
-      inputProps={{
-        ...getInputProps?.({
-          // refKey: "innerRef",
-          onKeyDown,
-          onChange,
-          onInput,
-          onBlur,
-          onClick,
-          value: inputValue,
-        }),
-        ...inputProps,
-      }}
+      {...getInputComponentProps({
+        onKeyDown,
+        onChange,
+        onInput,
+        onBlur,
+        onClick,
+        value: inputValue,
+        ref,
+        refKey: "innerRef",
+        inputProps,
+        ...ariaProps,
+      })}
       autoComplete={false}
       value={inputValue}
       {...rest}

package/src/Autocomplete/AutocompleteTokenInput.tsx

@@ -0,0 +1,50 @@
+import React, { useContext } from "react";
+import type { TypeDownshiftMergedInputProps } from "../types";
+import {
+  MenuTokenInput,
+  type TypeMenuTokenInputProps,
+} from "../MenuTokenInput";
+import { useMenuToggleContext } from "../MenuContext";
+
+export interface TypeAutocompleteTokenInputProps
+  extends TypeDownshiftMergedInputProps<TypeMenuTokenInputProps> {}
+
+export const AutocompleteTokenInput = ({
+  onKeyDown,
+  onChange,
+  onInput,
+  onBlur,
+  onClick,
+  inputProps,
+  getTokenProps,
+  ...rest
+}: TypeAutocompleteTokenInputProps) => {
+  const {
+    getInputComponentProps,
+    getDropdownProps,
+    inputValue,
+    isOpen,
+    ref,
+    ariaProps,
+  } = useMenuToggleContext();
+
+  return (
+    <MenuTokenInput
+      id="autocomplete_input"
+      name="autocomplete_input"
+      {...getInputComponentProps({
+        ...(getDropdownProps?.({ ref, preventKeyAction: isOpen }) || { ref }),
+        onKeyDown,
+        onChange,
+        onInput,
+        onBlur,
+        onClick,
+        value: inputValue,
+        refKey: "innerRef",
+        inputProps,
+        ...ariaProps,
+      })}
+      {...rest}
+    />
+  );
+};

package/src/Autocomplete/AutocompleteTypes.ts

@@ -1,15 +1,31 @@
-import type { TypeMenuRootProps, TypeMenuRootOwnProps } from "../MenuRoot";
+import type { TypeMenuRootOwnProps } from "../MenuRoot";
 import type {
   TypeDownshiftComboboxProps,
-  TypeMenuContext,
+  TypeDownshiftMultiSelectProps,
 } from "../MenuContext";
+import type { TypeGetIsItemVisibleFn } from "../hooks/useItemFiltering";
+import type { TypeMenuRootProps } from "../MenuRoot";
+import type { TypeMenuItemProps } from "../MenuItem";
+import type { TypeChildrenOrItems } from "../types";
 
-export interface TypeAutocompleteProps
-  extends TypeMenuRootOwnProps,
-    TypeDownshiftComboboxProps {
-  children: TypeMenuRootProps["children"];
-  getIsItemVisible?: (
-    item: TypeMenuContext["items"][number],
-    inputValue: string
-  ) => boolean;
-}
+export type TypeSingleAutocompleteProps<
+  I extends TypeMenuItemProps = TypeMenuItemProps
+> = TypeMenuRootOwnProps &
+  TypeChildrenOrItems<I> &
+  TypeDownshiftComboboxProps & {
+    getIsItemVisible?: TypeGetIsItemVisibleFn;
+  };
+
+export type TypeMultiAutocompleteProps<
+  I extends TypeMenuItemProps = TypeMenuItemProps
+> = TypeSingleAutocompleteProps<I> &
+  TypeDownshiftMultiSelectProps & {
+    /* Determine whether or not the combobox should display selected items in the dropdown */
+    showSelectedItemsInDropdown?: boolean;
+  };
+
+export type TypeAutocompleteProps<
+  I extends TypeMenuItemProps = TypeMenuItemProps
+> =
+  | (TypeSingleAutocompleteProps<I> & { multiSelect?: false })
+  | (TypeMultiAutocompleteProps<I> & { multiSelect: true });

package/src/Autocomplete/MultiAutocomplete.tsx

@@ -0,0 +1,189 @@
+import React from "react";
+import { useCombobox, useMultipleSelection } from "downshift";
+import { useMenuChildren } from "../hooks/useMenuChildren";
+import {
+  itemToString as defaultItemToString,
+  itemToKey as defaultItemToKey,
+} from "../utils/downshiftDefaults";
+import { reduceReducers } from "../utils/reduceReducers";
+import { useDownshiftDefaults } from "../hooks/useDownshiftDefaults";
+import {
+  useItemFiltering,
+  getDefaultGetIsItemVisible,
+  defaultGetShouldFilter,
+  type TypeGetShouldFilterFn,
+} from "../hooks/useItemFiltering";
+import { getSelectedItemIds } from "../MenuContext";
+import { MenuRoot } from "../MenuRoot";
+
+import type { TypeMenuItemProps } from "../MenuItem";
+import type { TypeMenuRootProps } from "../MenuRoot";
+import type { TypeMultiAutocompleteProps } from "./AutocompleteTypes";
+
+export const MultiAutocomplete = <
+  I extends TypeMenuItemProps = TypeMenuItemProps
+>({
+  children: childrenProp,
+  stateReducer: externalStateReducer,
+  menuItems,
+  MenuItemComponent,
+  itemToString = defaultItemToString,
+  itemToKey = defaultItemToKey,
+  getIsItemVisible = getDefaultGetIsItemVisible(itemToString),
+  showSelectedItemsInDropdown = false,
+  initialSelectedItems = [],
+  onStateChange,
+  onSelectedItemsChange,
+  getA11yMultiStatusMessage,
+  onMultiSelectStateChange,
+  multiSelectStateReducer,
+  ...useComboboxProps
+}: TypeMultiAutocompleteProps<I>) => {
+  /** Get a list of menuItems and children */
+  const { allMenuItems, children } = useMenuChildren({
+    children: childrenProp,
+    menuItems,
+    MenuItemComponent,
+  });
+  const [selectedItems, setSelectedItems] =
+    React.useState(initialSelectedItems);
+  const [selectedItemIds, setSelectedItemIds] = React.useState<
+    Record<string, boolean>
+  >(getSelectedItemIds(initialSelectedItems));
+
+  // function that checks that item should be visible based on the selected items
+  const getIsItemVisibleMulti = React.useCallback<typeof getIsItemVisible>(
+    (item, inputValue) => {
+      return (
+        (showSelectedItemsInDropdown || !selectedItemIds[item.id]) &&
+        getIsItemVisible(item, inputValue)
+      );
+    },
+    [selectedItemIds, showSelectedItemsInDropdown, getIsItemVisible]
+  );
+
+  // function that checks that item should be filtered
+  const getShouldFilterMulti = React.useCallback<TypeGetShouldFilterFn>(
+    (args) => {
+      return (
+        (!showSelectedItemsInDropdown &&
+          Object.keys(selectedItemIds).length > 0) ||
+        defaultGetShouldFilter(args)
+      );
+    },
+    [selectedItemIds, showSelectedItemsInDropdown, getIsItemVisible]
+  );
+
+  const { setHiddenItemsMap, defaultDownshiftProps, ...restDefaults } =
+    useDownshiftDefaults({
+      isCombobox: true,
+      isMulti: true,
+      // handles the prop name mapping for multi select
+      multiSelectProps: {
+        getA11yMultiStatusMessage,
+        onMultiSelectStateChange,
+        multiSelectStateReducer,
+        ...useComboboxProps,
+      },
+    });
+
+  // used to handle filtering of items
+  const { updateFilteredItems } = useItemFiltering({
+    allMenuItems,
+    itemToString,
+    getIsItemVisible: getIsItemVisibleMulti,
+    getShouldFilter: getShouldFilterMulti,
+    setHiddenItemsMap,
+  });
+
+  // update the filtered items when the selectedItemIds changes
+  React.useEffect(() => {
+    // the inputValue should be empty whenever the selected items change
+    // if the inputValue is needed here then it will need to be stored on a new state
+    updateFilteredItems({ inputValue: "" });
+  }, [selectedItemIds]);
+
+  const useMultipleSelectionReturnProps = useMultipleSelection({
+    ...defaultDownshiftProps.multi,
+    itemToKey,
+    selectedItems,
+    onSelectedItemsChange: ({ selectedItems, ...changes }) => {
+      setSelectedItems(selectedItems);
+      setSelectedItemIds(getSelectedItemIds(selectedItems));
+      onSelectedItemsChange &&
+        onSelectedItemsChange({ selectedItems, ...changes });
+    },
+  });
+
+  /**
+   * Destructure Downshift props and call the core useCombobox with items and state handler
+   */
+  const { isOpen, ...useComboboxReturnProps } = useCombobox<
+    (typeof allMenuItems)[number]
+  >({
+    ...defaultDownshiftProps.combobox,
+    items: allMenuItems,
+    itemToString,
+    itemToKey,
+    stateReducer: reduceReducers(
+      defaultDownshiftProps.combobox.stateReducer,
+      externalStateReducer
+    ),
+    onStateChange(changes) {
+      const { type, selectedItem: newSelectedItem, inputValue } = changes;
+      switch (type) {
+        // Add the selected item to the selected items list
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+          if (newSelectedItem) {
+            const newSelectedItems = [...selectedItems, newSelectedItem];
+            setSelectedItems(newSelectedItems);
+            setSelectedItemIds({
+              ...selectedItemIds,
+              [newSelectedItem.id]: true,
+            });
+            onSelectedItemsChange &&
+              onSelectedItemsChange({
+                selectedItems: newSelectedItems,
+                type: useMultipleSelection.stateChangeTypes
+                  .FunctionSetSelectedItems,
+              });
+          }
+          break;
+        default:
+          break;
+      }
+      // Update the filtered items based on the input value
+      if (inputValue !== undefined) updateFilteredItems({ inputValue });
+      onStateChange && onStateChange(changes);
+    },
+    ...useComboboxProps,
+  });
+
+  return (
+    <MenuRoot
+      {...{
+        isListbox: true,
+        items: allMenuItems,
+        itemToString,
+        isOpen,
+        initialSelectedItems,
+        onStateChange,
+        onSelectedItemsChange,
+        getA11yMultiStatusMessage,
+        onMultiSelectStateChange,
+        multiSelectStateReducer,
+        setHiddenItemsMap,
+        ...useComboboxProps,
+        ...useComboboxReturnProps,
+        ...useMultipleSelectionReturnProps,
+        ...restDefaults,
+      }}
+      popoutProps={{
+        focusOnContent: false,
+      }}
+    >
+      {children}
+    </MenuRoot>
+  );
+};

package/src/Autocomplete/SingleAutocomplete.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { useCombobox } from "downshift";
+import { useMenuChildren } from "../hooks/useMenuChildren";
+import { itemToString as defaultItemToString } from "../utils/downshiftDefaults";
+import { reduceReducers } from "../utils/reduceReducers";
+import { useDownshiftDefaults } from "../hooks/useDownshiftDefaults";
+import { useItemFiltering } from "../hooks/useItemFiltering";
+import { MenuRoot } from "../MenuRoot";
+
+import type { TypeMenuItemProps } from "../MenuItem";
+import type { TypeMenuRootProps } from "../MenuRoot";
+import type { TypeAutocompleteProps } from "./AutocompleteTypes";
+
+export const SingleAutocomplete = <
+  I extends TypeMenuItemProps = TypeMenuItemProps
+>({
+  children: childrenProp,
+  stateReducer: externalStateReducer,
+  menuItems,
+  MenuItemComponent,
+  itemToString = defaultItemToString,
+  getIsItemVisible,
+  ...useComboboxProps
+}: TypeAutocompleteProps<I>) => {
+  /** Get a list of menuItems and children */
+  const { allMenuItems, children } = useMenuChildren({
+    children: childrenProp,
+    menuItems,
+    MenuItemComponent,
+  });
+  const { setHiddenItemsMap, defaultDownshiftProps, ...restDefaults } =
+    useDownshiftDefaults({ isCombobox: true });
+  const { updateFilteredItems } = useItemFiltering({
+    allMenuItems,
+    itemToString,
+    getIsItemVisible,
+    setHiddenItemsMap,
+  });
+
+  /**
+   * Destructure Downshift props and call the core useCombobox with items and state handler
+   */
+  const { isOpen, ...useComboboxReturnProps } = useCombobox({
+    ...defaultDownshiftProps.combobox,
+    items: allMenuItems,
+    itemToString,
+    onInputValueChange: updateFilteredItems,
+    stateReducer: reduceReducers(
+      defaultDownshiftProps.combobox.stateReducer,
+      externalStateReducer
+    ),
+    ...useComboboxProps,
+  });
+
+  return (
+    <MenuRoot
+      {...{
+        isListbox: true,
+        items: allMenuItems,
+        itemToString,
+        isOpen,
+        setHiddenItemsMap,
+        ...useComboboxProps,
+        ...useComboboxReturnProps,
+        ...restDefaults,
+      }}
+      popoutProps={{
+        focusOnContent: false,
+      }}
+    >
+      {children}
+    </MenuRoot>
+  );
+};