@sproutsocial/seeds-react-menu 0.5.0 → 1.0.0

package/src/hooks/useDownshiftDefaults.tsx

@@ -0,0 +1,117 @@
+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" | "hiddenItemsCount"
+  > {
+  defaultDownshiftProps: {
+    select: Partial<UseSelectProps<TypeInternalItemProps>>;
+    combobox: Partial<UseComboboxProps<TypeInternalItemProps>>;
+    multi: Partial<UseMultipleSelectionProps<TypeInternalItemProps>>;
+  };
+}
+
+export const itemToKey = (item: TypeInternalItemProps | null) => item?.id;
+
+export const useDownshiftDefaults = ({
+  isCombobox = false,
+  isMulti = false,
+  multiSelectProps = {},
+}: {
+  isCombobox?: boolean;
+  isMulti?: boolean;
+  multiSelectProps?: TypeDownshiftMultiSelectProps;
+} = {}): TypeUseDownshiftDefaultsReturn => {
+  const [hiddenItemsMap, setHiddenItemsMap] = React.useState<
+    Record<string, boolean>
+  >({});
+  const hiddenItemsCount = React.useMemo(
+    () => Object.keys(hiddenItemsMap).filter(Boolean).length,
+    [hiddenItemsMap]
+  );
+  const isItemDisabled = React.useCallback<
+    Required<UseSelectProps<TypeInternalItemProps>>["isItemDisabled"]
+  >(
+    (item) => Boolean(item.disabled || hiddenItemsMap[item.id]),
+    [hiddenItemsMap]
+  );
+
+  return {
+    hiddenItemsMap,
+    hiddenItemsCount,
+    setHiddenItemsMap,
+    defaultDownshiftProps: {
+      select: !isCombobox
+        ? {
+            itemToKey,
+            // disabling while item.hidden so that hidden items are ignored by downshift
+            isItemDisabled,
+            ...(isMulti
+              ? defaultUseSelectPropsForMulti
+              : defaultUseSelectProps),
+          }
+        : {},
+      combobox: isCombobox
+        ? {
+            itemToKey,
+            // disabling while item.hidden so that hidden items are ignored by downshift
+            isItemDisabled,
+            ...(isMulti
+              ? defaultUseComboboxPropsForMulti
+              : defaultUseComboboxProps),
+          }
+        : {},
+      multi: isMulti
+        ? {
+            itemToKey,
+            // handles the prop name mapping for multi select
+            ...getMultiSelectOverrides(multiSelectProps),
+          }
+        : {},
+    },
+  };
+};

package/src/hooks/useItemFiltering.tsx

@@ -0,0 +1,68 @@
+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

@@ -1,29 +1,40 @@
 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 } from "../MenuGroup/index";
-import type { TypeNotEmptyChildren } from "../types";
-import { MenuContent, type TypeMenuContentProps } from "../MenuContent/index";
+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 TypeUseMenuChildrenProps {
-  children?: ReactNode;
-  items?: TypeMenuItemProps[];
-  MenuItemComponent?: React.ComponentType<TypeMenuItemProps>;
+export interface TypeMapMenuItemsProps<
+  I extends TypeMenuItemProps = TypeMenuItemProps
+> {
+  menuItems: I[];
+  MenuItemComponent?: React.ComponentType<I>;
 }
-export interface TypeMapMenuItemsProps {
-  items: TypeMenuItemProps[];
-  MenuItemComponent: React.ComponentType<TypeMenuItemProps>;
-}
-export type TypeItemElement = React.ReactElement<TypeMenuItemProps>;
-export type TypeMenuGroupElement = React.ReactElement<TypeMenuGroupProps>;
-export type TypeMenuContentElement = React.ReactElement<TypeMenuContentProps>;
+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:
-    | React.ReactElement<TypeMenuGroupProps>
-    | React.ReactElement<TypeMenuItemProps>
-    | React.ReactElement<TypeMenuContentProps>;
+  element: TypeItemElement | TypeMenuGroupElement | TypeMenuContentElement;
 }
 
 // https://stackoverflow.com/questions/69119016/find-specific-children-components-regardless-of-depth-in-react
@@ -46,165 +57,228 @@ const walkAllChildren = (
   });
 };
 
+// get the name from our custom __MENU_PRIMITIVE_TYPE property
 const getComponentName = (element: ReactNode): string | undefined => {
   if (
     element &&
     typeof element === "object" &&
     "type" in element &&
-    typeof element.type !== "string" &&
-    typeof element.type.name === "string"
+    (typeof element.type === "function" || typeof element.type === "object") &&
+    "__MENU_PRIMITIVE_TYPE" in element.type &&
+    typeof element.type.__MENU_PRIMITIVE_TYPE === "string"
   ) {
-    return element.type.name;
+    return element.type.__MENU_PRIMITIVE_TYPE;
   }
 };
 
-const getAllMenuItems = (children: ReactNode) => {
-  const orderedElements: TypeMenuChildren[] = [];
+// Add a menu item to the provided allMenuItems array and menuItemsMap object
+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;
+};
+
+// Add items from a MenuGroup element to the allMenuItems array and menuItemsMap object
+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,
+      });
+    });
+  }
+};
+
+// Add items from a MenuContent element to the allMenuItems array and menuItemsMap object
+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,
+      });
+    });
+  }
+};
+
+// Traverse the children of a Menu component and add items to the allMenuItems array and menuItemsMap object
+const setMenuItemsFromChildren = ({
+  children,
+  allMenuItems,
+  menuItemsMap,
+}: {
+  children: ReactNode;
+  allMenuItems: TypeMenuContext["items"];
+  menuItemsMap: TypeMenuContext["itemsMap"];
+}) => {
   walkAllChildren(children, (element) => {
     switch (getComponentName(element)) {
       case "MenuItem":
-        orderedElements.push({
-          type: "item",
-          element: element as TypeItemElement,
+        // 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":
-        orderedElements.push({
-          type: "group",
-          element: element as TypeMenuGroupElement,
+        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":
-        orderedElements.push({
-          type: "content",
-          element: element as TypeMenuContentElement,
+        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;
     }
   });
-  return { orderedElements };
 };
 
-// Returns a fragment containing a `MenuItemComponent` for each item in `items`.
-export const mapMenuItems = ({
-  items,
-  MenuItemComponent,
-}: TypeMapMenuItemsProps) => {
+// Returns a fragment containing a `MenuItemComponent` for each item in `menuItems`.
+export const mapMenuItems = <I extends TypeMenuItemProps = TypeMenuItemProps>({
+  menuItems,
+  MenuItemComponent = MenuItem,
+}: TypeMapMenuItemsProps<I>) => {
   return (
     <>
-      {items.map((menuItem) => (
-        <MenuItemComponent key={menuItem.id} {...menuItem} />
+      {menuItems.map((menuItemProps) => (
+        <MenuItemComponent key={menuItemProps.id} {...menuItemProps} />
       ))}
     </>
   );
 };
 
-export const useMenuChildren = ({
+type TypeUseMenuChildrenProps<I extends TypeMenuItemProps = TypeMenuItemProps> =
+  {
+    children?: TypeMenuRootProps["children"];
+    menuItems?: I[];
+    MenuItemComponent?: React.ComponentType<I>;
+  };
+
+// Return a MenuContent using the provided menuItems
+export const getChildrenFromMenuItems = <
+  I extends TypeMenuItemProps = TypeMenuItemProps
+>({
+  menuItems,
+  MenuItemComponent,
+}: {
+  menuItems: I[];
+  MenuItemComponent?: React.ComponentType<I>;
+}) => (
+  <MenuContent menuItems={menuItems} MenuItemComponent={MenuItemComponent} />
+);
+
+// Hook to get all menu items and children for a Menu component
+export const useMenuChildren = <
+  I extends TypeMenuItemProps = TypeMenuItemProps
+>({
   children: childrenProp,
-  items,
-  MenuItemComponent = MenuItem,
-}: TypeUseMenuChildrenProps) => {
+  menuItems,
+  MenuItemComponent,
+}: TypeUseMenuChildrenProps<I>) => {
   const { allMenuItems, menuItemsMap, children } = useMemo(() => {
     let children: TypeNotEmptyChildren = <></>;
-    let index = 0;
     const menuItemsMap: TypeMenuContext["itemsMap"] = {};
     const allMenuItems: TypeMenuContext["items"] = [];
 
-    // If an items prop was passed to the Menu, we can bypass the children traversal.
-    if (items && items.length) {
-      items.forEach((menuItem) => {
-        const item = {
-          id: menuItem.id,
-          index: index++,
-          disabled: menuItem.disabled,
-          menuItemProps: menuItem,
-        };
-        allMenuItems.push(item);
-        menuItemsMap[`${item.id}`] = item;
+    // 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 = (
-        <MenuContent>{mapMenuItems({ items, MenuItemComponent })}</MenuContent>
-      );
+      children = getChildrenFromMenuItems({ menuItems, MenuItemComponent });
     } else if (childrenProp) {
       children = childrenProp as TypeNotEmptyChildren;
-      const { orderedElements } = getAllMenuItems(childrenProp);
-
-      orderedElements.forEach(({ type, element }) => {
-        /*       If MenuContent has items, we need to add them to the menuItemsMap.
-         We do not need to worry about checking its children prop because
-         we are already traversing the children, and we do not need to add any
-         menuContentProps to add to the item object*/
-        if (type === "content") {
-          const menuContent = element as TypeMenuContentElement;
-          const items = menuContent.props.items;
-          if (items) {
-            items.forEach((menuItem) => {
-              const item = {
-                id: menuItem.id,
-                index: index++,
-                children: menuItem.children,
-                disabled: menuItem.disabled,
-                menuItemProps: menuItem,
-              };
-              allMenuItems.push(item);
-              menuItemsMap[`${item.id}`] = item;
-            });
-          }
-        } else if (type === "group") {
-          const menuGroup = element as TypeMenuGroupElement;
-          const items = menuGroup.props.items;
-          if (items) {
-            items.forEach((menuItem) => {
-              const item = {
-                id: menuItem.id,
-                index: index++,
-                children: menuItem.children,
-                disabled: menuItem.disabled,
-                menuItemProps: menuItem,
-                menuGroupProps: element.props as TypeMenuGroupProps,
-              };
-              allMenuItems.push(item);
-              menuItemsMap[`${item.id}`] = item;
-            });
-          } 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) => {
-              const item = {
-                id: menuItem.props.id,
-                index: index++,
-                children: menuItem.props.children,
-                disabled: menuItem.props.disabled,
-                menuItemProps: menuItem.props,
-                menuGroupProps: element.props as TypeMenuGroupProps,
-              };
-              allMenuItems.push(item);
-              menuItemsMap[`${item.id}`] = item;
-            });
-          }
-        } else {
-          // Items in groups would have already been added to the map.
-          if (menuItemsMap[`${element.props.id}`]) return;
-          const menuItem = element as TypeItemElement;
-          const item = {
-            id: menuItem.props.id,
-            index: index++,
-            disabled: menuItem.props.disabled,
-            menuItemProps: menuItem.props,
-          };
-          allMenuItems.push(item);
-          menuItemsMap[`${item.id}`] = item;
-        }
+      setMenuItemsFromChildren({
+        children: childrenProp,
+        allMenuItems,
+        menuItemsMap,
       });
     }
 
     return { allMenuItems, menuItemsMap, children };
-  }, [childrenProp, items, MenuItemComponent]);
+  }, [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 "./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>
   );
 };