@sproutsocial/seeds-react-menu 0.4.1 → 0.6.0

package/src/__tests__/Menu.test.tsx

@@ -356,5 +356,43 @@ describe("Menu", () => {
       // Check that stateReducer is called
       await waitFor(() => expect(mockStateReducer).toHaveBeenCalled());
     });
+
+    it("should render the MenuItems when provided as children", async () => {
+      const { user } = render(
+        <Component menuToggleElement={toggleElement}>
+          <MenuContent>
+            <MenuItem id="item-1">Item 1</MenuItem>
+            <MenuItem id="item-2">Item 2</MenuItem>
+          </MenuContent>
+        </Component>
+      );
+
+      // Open Menu
+      const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+      await user.click(menuTrigger);
+
+      // Check if both items are rendered
+      await screen.findByText("Item 1");
+      await screen.findByText("Item 2");
+    });
+
+    it("should render the MenuItems when provided as items", async () => {
+      const { user } = render(
+        <Component menuToggleElement={toggleElement}>
+          <MenuContent>
+            <MenuItem id="item-1">Item 1</MenuItem>
+            <MenuItem id="item-2">Item 2</MenuItem>
+          </MenuContent>
+        </Component>
+      );
+
+      // Open Menu
+      const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+      await user.click(menuTrigger);
+
+      // Check if both items are rendered
+      await screen.findByText("Item 1");
+      await screen.findByText("Item 2");
+    });
   });
 });

package/src/hooks/useDownshiftDefaults.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import type {
+  UseComboboxProps,
+  UseSelectProps,
+  UseMultipleSelectionProps,
+} from "downshift";
+import type { TypeInternalItemProps } from "../types";
+import type {
+  TypeMenuContextBaseProps,
+  TypeDownshiftMultiSelectProps,
+} from "../MenuContext";
+import {
+  useComboboxStateReducer,
+  useComboboxStateReducerForMulti,
+} from "../reducers/useComboboxStateReducer";
+import {
+  useSelectStateReducer,
+  useSelectStateReducerForMulti,
+} from "../reducers/useSelectStateReducer";
+import { getMultiSelectOverrides } from "../utils/getMultiSelectOverrides";
+
+export const defaultUseSelectProps: Partial<
+  UseSelectProps<TypeInternalItemProps>
+> = {
+  stateReducer: useSelectStateReducer,
+};
+
+export const defaultUseComboboxProps: Partial<
+  UseComboboxProps<TypeInternalItemProps>
+> = {
+  stateReducer: useComboboxStateReducer,
+};
+
+export const defaultUseSelectPropsForMulti: Partial<
+  UseSelectProps<TypeInternalItemProps>
+> = {
+  stateReducer: useSelectStateReducerForMulti,
+};
+
+export const defaultUseComboboxPropsForMulti: Partial<
+  UseComboboxProps<TypeInternalItemProps>
+> = {
+  stateReducer: useComboboxStateReducerForMulti,
+};
+
+export interface TypeUseDownshiftDefaultsReturn
+  extends Pick<
+    Required<TypeMenuContextBaseProps>,
+    "hiddenItemsMap" | "setHiddenItemsMap"
+  > {
+  defaultDownshiftProps: {
+    select: Partial<UseSelectProps<TypeInternalItemProps>>;
+    combobox: Partial<UseComboboxProps<TypeInternalItemProps>>;
+    multi: Partial<UseMultipleSelectionProps<TypeInternalItemProps>>;
+  };
+}
+
+export const useDownshiftDefaults = ({
+  isCombobox = false,
+  isMulti = false,
+  multiSelectProps = {},
+}: {
+  isCombobox?: boolean;
+  isMulti?: boolean;
+  multiSelectProps?: TypeDownshiftMultiSelectProps;
+} = {}): TypeUseDownshiftDefaultsReturn => {
+  const [hiddenItemsMap, setHiddenItemsMap] = React.useState<
+    Record<string, boolean>
+  >({});
+  const isItemDisabled = React.useCallback<
+    Required<UseSelectProps<TypeInternalItemProps>>["isItemDisabled"]
+  >(
+    (item) => Boolean(item.disabled || hiddenItemsMap[item.id]),
+    [hiddenItemsMap]
+  );
+
+  return {
+    hiddenItemsMap,
+    setHiddenItemsMap,
+    defaultDownshiftProps: {
+      select: !isCombobox
+        ? {
+            // disabling while item.hidden so that hidden items are ignored by downshift
+            isItemDisabled,
+            ...(isMulti
+              ? defaultUseSelectPropsForMulti
+              : defaultUseSelectProps),
+          }
+        : {},
+      combobox: isCombobox
+        ? {
+            // disabling while item.hidden so that hidden items are ignored by downshift
+            isItemDisabled,
+            ...(isMulti
+              ? defaultUseComboboxPropsForMulti
+              : defaultUseComboboxProps),
+          }
+        : {},
+      multi: isMulti
+        ? {
+            // handles the prop name mapping for multi select
+            ...getMultiSelectOverrides(multiSelectProps),
+          }
+        : {},
+    },
+  };
+};

package/src/hooks/useItemFiltering.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import type { TypeMenuContext } from "../MenuContext";
+import type { TypeInternalItemProps } from "../types";
+import { itemToString as defaultItemToString } from "../utils/downshiftDefaults";
+
+export type TypeGetIsItemVisibleFn = (
+  item: TypeMenuContext["items"][number],
+  inputValue: string
+) => boolean;
+
+/**
+ * @description A function to get the default getIsItemVisible function
+ *
+ * @param itemToString - A function to convert an item to a string
+ *
+ * @returns The default getIsItemVisible function
+ */
+export const getDefaultGetIsItemVisible =
+  (
+    itemToString: TypeMenuContext["itemToString"] = defaultItemToString
+  ): TypeGetIsItemVisibleFn =>
+  (item, inputValue) =>
+    itemToString(item).toLowerCase().includes(inputValue.toLowerCase());
+
+export type TypeGetShouldFilterFn = (arg: { inputValue?: string }) => boolean;
+
+export const defaultGetShouldFilter: TypeGetShouldFilterFn = ({ inputValue }) =>
+  Boolean(inputValue);
+
+export interface TypeItemFilteringProps {
+  allMenuItems: TypeInternalItemProps[];
+  itemToString?: TypeMenuContext["itemToString"];
+  getIsItemVisible?: TypeGetIsItemVisibleFn;
+  getShouldFilter?: TypeGetShouldFilterFn;
+  setHiddenItemsMap?: TypeMenuContext["setHiddenItemsMap"];
+}
+
+export const useItemFiltering = ({
+  allMenuItems,
+  itemToString,
+  getIsItemVisible = getDefaultGetIsItemVisible(itemToString),
+  getShouldFilter = defaultGetShouldFilter,
+  setHiddenItemsMap: setHiddenItemsMapProp,
+}: TypeItemFilteringProps) => {
+  const [hiddenItemsMap, setHiddenItemsMap] = React.useState<
+    Required<TypeMenuContext>["hiddenItemsMap"]
+  >({});
+  const updateFilteredItems = React.useCallback(
+    ({ inputValue }) => {
+      const newHiddenItems = getShouldFilter({ inputValue })
+        ? allMenuItems.reduce((map, item) => {
+            const isItemVisible = getIsItemVisible(item, inputValue);
+            return isItemVisible ? map : { ...map, [item.id]: true };
+          }, {} as typeof hiddenItemsMap)
+        : {};
+      setHiddenItemsMap(newHiddenItems);
+      setHiddenItemsMapProp?.(newHiddenItems);
+    },
+    [allMenuItems, getIsItemVisible, getShouldFilter]
+  );
+
+  return {
+    getIsItemVisible,
+    updateFilteredItems,
+  };
+};

package/src/hooks/useMenuChildren.tsx

@@ -0,0 +1,279 @@
+import React, { type ReactNode, useMemo } from "react";
+import { MenuItem, type TypeMenuItemProps } from "../MenuItem";
+import type {
+  TypeSubmenuItemProps,
+  TypeSubmenuValidMenuComponentProps,
+} from "../SubmenuItem";
+import type { TypeMenuContext } from "../MenuContext";
+import type { TypeMenuGroupProps, TypeMenuGroupBaseProps } from "../MenuGroup";
+import type { TypeMenuRootProps } from "../MenuRoot";
+import type {
+  TypeNotEmptyChildren,
+  TypeChildrenOrItems,
+  TypeInternalItemProps,
+} from "../types";
+import { MenuContent, type TypeMenuContentProps } from "../MenuContent";
+
+export interface TypeMapMenuItemsProps<
+  I extends TypeMenuItemProps = TypeMenuItemProps
+> {
+  menuItems: I[];
+  MenuItemComponent?: React.ComponentType<I>;
+}
+export type TypeItemElement<I extends TypeMenuItemProps = TypeMenuItemProps> =
+  React.ReactElement<
+    | TypeMenuItemProps
+    | TypeSubmenuItemProps<I, TypeSubmenuValidMenuComponentProps<I>>
+  >;
+export type TypeMenuGroupElement<
+  I extends TypeMenuItemProps = TypeMenuItemProps
+> = React.ReactElement<TypeMenuGroupProps<I>>;
+export type TypeMenuContentElement<
+  I extends TypeMenuItemProps = TypeMenuItemProps
+> = React.ReactElement<TypeMenuContentProps<I>>;
+
+export interface TypeMenuChildren {
+  type: "item" | "group" | "content";
+  element: TypeItemElement | TypeMenuGroupElement | TypeMenuContentElement;
+}
+
+// https://stackoverflow.com/questions/69119016/find-specific-children-components-regardless-of-depth-in-react
+const walkAllChildren = (
+  children: ReactNode,
+  callback: (element: ReactNode, parents: readonly ReactNode[]) => void
+) => {
+  const walk = (element: ReactNode, parents: readonly ReactNode[]) => {
+    if (element === null || element === undefined) return;
+    callback(element, parents);
+    const newParents = [...parents, element];
+    const children = (element as any).props?.children;
+    React.Children.toArray(children).forEach((child) => {
+      walk(child, newParents);
+    });
+  };
+  const parents = [];
+  React.Children.toArray(children).forEach((child) => {
+    walk(child, parents);
+  });
+};
+
+const getComponentName = (element: ReactNode): string | undefined => {
+  if (
+    element &&
+    typeof element === "object" &&
+    "type" in element &&
+    typeof element.type !== "string" &&
+    typeof element.type.name === "string"
+  ) {
+    return element.type.name;
+  }
+};
+
+const addMenuItem = ({
+  itemProps,
+  allMenuItems,
+  menuItemsMap,
+}: {
+  itemProps: Omit<TypeInternalItemProps, "index">;
+  allMenuItems: TypeMenuContext["items"];
+  menuItemsMap: TypeMenuContext["itemsMap"];
+}) => {
+  const item = {
+    ...itemProps,
+    index: allMenuItems.length,
+  };
+  allMenuItems.push(item);
+  menuItemsMap[`${item.id}`] = item;
+};
+
+const addItemsFromGroup = <I extends TypeMenuItemProps = TypeMenuItemProps>({
+  groupElement: menuGroup,
+  allMenuItems,
+  menuItemsMap,
+}: {
+  groupElement: TypeMenuGroupElement<I>;
+  allMenuItems: TypeMenuContext["items"];
+  menuItemsMap: TypeMenuContext["itemsMap"];
+}) => {
+  const menuItems = menuGroup.props.menuItems;
+  if (menuItems) {
+    menuItems.forEach((menuItem) => {
+      addMenuItem({
+        itemProps: {
+          id: menuItem.id,
+          disabled: menuItem.disabled,
+          menuItemProps: menuItem,
+          menuGroupProps: menuGroup.props,
+        },
+        allMenuItems,
+        menuItemsMap,
+      });
+    });
+  } else if (menuGroup.props.children) {
+    let children = menuGroup.props.children as TypeItemElement[];
+    // If there is only one child, it will be an object. Make it an array.
+    if (!Array.isArray(children)) {
+      children = [children];
+    }
+    children.forEach((menuItem) => {
+      addMenuItem({
+        itemProps: {
+          id: menuItem.props.id,
+          disabled: menuItem.props.disabled,
+          menuItemProps: menuItem.props,
+          menuGroupProps: menuGroup.props,
+        },
+        allMenuItems,
+        menuItemsMap,
+      });
+    });
+  }
+};
+
+const addItemsFromContent = <I extends TypeMenuItemProps = TypeMenuItemProps>({
+  contentElement: menuContent,
+  allMenuItems,
+  menuItemsMap,
+}: {
+  contentElement: TypeMenuContentElement<I>;
+  allMenuItems: TypeMenuContext["items"];
+  menuItemsMap: TypeMenuContext["itemsMap"];
+}) => {
+  /**
+   * No need to add items inside of MenuContent if it does not have menuItems
+   * since we already traversed the children and menuContentProps are not needed.
+   */
+  if (!("menuItems" in menuContent.props)) return;
+  // Add items from menuItems prop if it isn't empty
+  if (menuContent.props.menuItems) {
+    menuContent.props.menuItems.forEach((menuItem) => {
+      addMenuItem({
+        itemProps: {
+          id: menuItem.id,
+          disabled: menuItem.disabled,
+          menuItemProps: menuItem,
+        },
+        allMenuItems,
+        menuItemsMap,
+      });
+    });
+  }
+};
+
+const setMenuItemsFromChildren = ({
+  children,
+  allMenuItems,
+  menuItemsMap,
+}: {
+  children: ReactNode;
+  allMenuItems: TypeMenuContext["items"];
+  menuItemsMap: TypeMenuContext["itemsMap"];
+}) => {
+  walkAllChildren(children, (element) => {
+    switch (getComponentName(element)) {
+      case "MenuItem":
+      case "SubmenuItem":
+      case "NestedMenuItem":
+        // Cast element to the TypeItemElement since we know it's one of the three.
+        // This is needed for the addMenuItem function.
+        const menuItem = element as TypeItemElement;
+        // Items in groups would have already been added to the map.
+        if (menuItemsMap[`${menuItem.props.id}`]) return;
+        addMenuItem({
+          itemProps: {
+            id: menuItem.props.id,
+            disabled: menuItem.props.disabled,
+            menuItemProps: menuItem.props,
+          },
+          allMenuItems,
+          menuItemsMap,
+        });
+        break;
+      case "MenuGroup":
+        addItemsFromGroup({
+          // Cast element to the TypeMenuGroupElement since we know it's a group and is needed for addItemsFromGroup.
+          groupElement: element as TypeMenuGroupElement,
+          allMenuItems,
+          menuItemsMap,
+        });
+        break;
+      case "MenuContent":
+      case "NestedMenuContent":
+        addItemsFromContent({
+          // Cast element to the TypeMenuContentElement since we know it's a content and is needed for addItemsFromContent.
+          contentElement: element as TypeMenuContentElement,
+          allMenuItems,
+          menuItemsMap,
+        });
+        break;
+      default:
+        break;
+    }
+  });
+};
+
+// Returns a fragment containing a `MenuItemComponent` for each item in `menuItems`.
+export const mapMenuItems = <I extends TypeMenuItemProps = TypeMenuItemProps>({
+  menuItems,
+  MenuItemComponent = MenuItem,
+}: TypeMapMenuItemsProps<I>) => {
+  return (
+    <>
+      {menuItems.map((menuItemProps) => (
+        <MenuItemComponent key={menuItemProps.id} {...menuItemProps} />
+      ))}
+    </>
+  );
+};
+
+type TypeUseMenuChildrenProps<I extends TypeMenuItemProps = TypeMenuItemProps> =
+  {
+    children?: TypeMenuRootProps["children"];
+    menuItems?: I[];
+    MenuItemComponent?: React.ComponentType<I>;
+  };
+
+export const getChildrenFromMenuItems = <
+  I extends TypeMenuItemProps = TypeMenuItemProps
+>({
+  menuItems,
+  MenuItemComponent,
+}: {
+  menuItems: I[];
+  MenuItemComponent?: React.ComponentType<I>;
+}) => (
+  <MenuContent menuItems={menuItems} MenuItemComponent={MenuItemComponent} />
+);
+
+export const useMenuChildren = <
+  I extends TypeMenuItemProps = TypeMenuItemProps
+>({
+  children: childrenProp,
+  menuItems,
+  MenuItemComponent,
+}: TypeUseMenuChildrenProps<I>) => {
+  const { allMenuItems, menuItemsMap, children } = useMemo(() => {
+    let children: TypeNotEmptyChildren = <></>;
+    const menuItemsMap: TypeMenuContext["itemsMap"] = {};
+    const allMenuItems: TypeMenuContext["items"] = [];
+
+    // If an menuItems prop was passed to the Menu, we can bypass the children traversal.
+    if (menuItems && menuItems.length) {
+      menuItems.forEach((menuItem) => {
+        addMenuItem({ itemProps: menuItem, allMenuItems, menuItemsMap });
+      });
+      children = getChildrenFromMenuItems({ menuItems, MenuItemComponent });
+    } else if (childrenProp) {
+      children = childrenProp as TypeNotEmptyChildren;
+      setMenuItemsFromChildren({
+        children: childrenProp,
+        allMenuItems,
+        menuItemsMap,
+      });
+    }
+
+    return { allMenuItems, menuItemsMap, children };
+  }, [childrenProp, menuItems, MenuItemComponent]);
+
+  return { allMenuItems, menuItemsMap, children };
+};

package/src/index.ts

@@ -7,15 +7,21 @@ export * from "./MenuGroup";
 export * from "./MenuRoot";
 export * from "./MenuLabel";
 export * from "./MenuToggleButton";
+export * from "./MenuSearchInput";
+export * from "./MenuTokenInput";
+export * from "./MenuSearchTokenInput";
+export * from "./SubmenuItem";
 
 // Menus
 export * from "./ActionMenu";
 export * from "./SingleSelectMenu";
 export * from "./MultiSelectMenu";
 export * from "./Autocomplete";
+export * from "./NestedMenu";
 
 // Utilities
 export * from "./MenuContext";
-export * from "./hooks/useItemsFromChildren";
+export * from "./NestedMenu/NestedMenuContext";
+export * from "./hooks/useMenuChildren";
 export * from "./reducers/useSelectStateReducer";
 export * from "./types";

package/src/menuTestingUtils.tsx

@@ -1,15 +1,19 @@
 import React from "react";
 import {
-  MenuContext,
+  MenuContentContext,
   MenuRoot,
+  checkIfItemSelected,
+  getSelectedItemIds,
+  useMenu,
   type TypeMenuContextProps,
   type TypeMenuContext,
   type TypeMenuRootProps,
 } from "./index";
 
-export const testDefaultContext = (
-  context: Partial<TypeMenuContextProps> = {}
-): TypeMenuContext => ({
+export const testDefaultContext = ({
+  getToggleButtonProps,
+  ...context
+}: Partial<TypeMenuContextProps> = {}): TypeMenuContext => ({
   items: [],
   itemsMap: context.items
     ? context.items.reduce((map, item) => {
@@ -17,10 +21,16 @@ export const testDefaultContext = (
         return map;
       }, {} as TypeMenuContext["itemsMap"])
     : {},
-  // TODO: Make type on MenuContext more agnostic for other use cases
+  // TODO: Make type on MenuContentContext more agnostic for other use cases
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-expect-error - mocked function does not match real type
   getItemProps: (props) => ({ role: "option", ...props }),
+  // @ts-expect-error - mocked function does not match real type
+  getToggleButtonProps: ({ ref, refKey, ...props } = {}) => ({
+    ...getToggleButtonProps?.({ ref, refKey, ...props }),
+    ...(ref ? { [refKey]: ref } : {}),
+    ...props,
+  }),
   isListbox: true,
   ...context,
 });
@@ -53,12 +63,12 @@ export const TestWithMenuRoot = ({
 
 /**
  * TestWithMockedMenu
- * Given a children and context, render the children with the raw MenuContext with a mocked value.
+ * Given a children and context, render the children with the raw MenuContentContext with a mocked value.
  * Used for unit testing components without the real MenuProvider or MenuRoot.
  *
- * @param children - react children to be loaded inside of the MenuContext.Provider
+ * @param children - react children to be loaded inside of the MenuContentContext.Provider
  * @param context - mocked context props to override the testDefaultContext
- * @returns - rendered component with mocked MenuContext
+ * @returns - rendered component with mocked MenuContentContext
  */
 export const TestWithMockedMenu = ({
   children,
@@ -67,9 +77,10 @@ export const TestWithMockedMenu = ({
   children: React.ReactNode;
   context: Partial<TypeMenuContextProps>;
 }) => {
+  const menuContext = useMenu(testDefaultContext(context));
   return (
-    <MenuContext.Provider value={testDefaultContext(context)}>
+    <MenuContentContext.Provider value={menuContext}>
       {children}
-    </MenuContext.Provider>
+    </MenuContentContext.Provider>
   );
 };

package/src/reducers/nestedMenuStateReducer.tsx

@@ -0,0 +1,23 @@
+import { useCombobox, useSelect } from "downshift";
+
+export const nestedMenuStateReducer = (_state, actionAndChanges) => {
+  const { type, changes } = actionAndChanges;
+  const hasChildMenu = !!changes?.selectedItem?.menuItemProps?.childMenuId;
+  if (!hasChildMenu) {
+    return changes;
+  }
+  switch (type) {
+    case useSelect.stateChangeTypes.ToggleButtonBlur:
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+    case useSelect.stateChangeTypes.ItemClick:
+    case useCombobox.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: true,
+        highlightedIndex: 0,
+      };
+    default:
+      return changes;
+  }
+};

package/src/reducers/useComboboxStateReducer.tsx

@@ -1,11 +1,13 @@
 import { useCombobox } from "downshift";
 import type { UseComboboxProps } from "downshift";
-import type { TypeDefaultItemProps } from "../types";
+import type { TypeInternalItemProps } from "../types";
+import { reduceReducers } from "../utils/reduceReducers";
 
 export const useComboboxStateReducer: Required<
-  UseComboboxProps<TypeDefaultItemProps>
+  UseComboboxProps<TypeInternalItemProps>
 >["stateReducer"] = (state, actionAndChanges) => {
   const { type, changes } = actionAndChanges;
+
   switch (type) {
     /** If downshift is blurred by tabbing within the menu, stay open */
     case useCombobox.stateChangeTypes.InputBlur:
@@ -21,9 +23,25 @@ export const useComboboxStateReducer: Required<
   }
 };
 
-export const defaultUseComboboxProps: Partial<
-  UseComboboxProps<TypeDefaultItemProps>
-> = {
-  // disabling while item.hidden so that hidden items are ignored by downshift
-  isItemDisabled: (item) => Boolean(item.disabled || item.hidden),
-};
+export const useComboboxStateReducerForMulti: Required<
+  UseComboboxProps<TypeInternalItemProps>
+>["stateReducer"] = reduceReducers(
+  useComboboxStateReducer,
+  (state, actionAndChanges) => {
+    const { changes, type } = actionAndChanges;
+
+    switch (type) {
+      case useCombobox.stateChangeTypes.InputKeyDownEnter:
+      case useCombobox.stateChangeTypes.ItemClick:
+      case useCombobox.stateChangeTypes.InputBlur:
+        return {
+          ...changes,
+          ...(changes.selectedItem && {
+            inputValue: "",
+          }),
+        };
+      default:
+        return changes;
+    }
+  }
+);