@sproutsocial/seeds-react-menu 1.0.1 → 1.1.1

package/src/NestedMenu/NestedMenu.stories.tsx

@@ -12,9 +12,11 @@ import {
   MenuToggleButton,
   MultiSelectMenu,
   NestedMenu,
+  MenuSearchInput,
 } from "../index";
 import { NestedMenuItem } from "./NestedMenuItem";
 import { NestedMenuContent } from "./NestedMenuContent";
+import { MotionConfig } from "motion/react";
 
 type CustomNestedMenuArgs = React.ComponentProps<typeof NestedMenu>;
 
@@ -61,7 +63,7 @@ const menus = {
     MenuComponent: ActionMenu,
     menuProps: {
       children: (
-        <NestedMenuContent>
+        <NestedMenuContent id="MenuContentWithChildren">
           <NestedMenuItem
             id="item-2"
             children="Books as ActionMenu"
@@ -100,6 +102,7 @@ const menus = {
   "books-multiselect": {
     MenuComponent: MultiSelectMenu,
     menuProps: {
+      itemToString: (item) => item.menuItemProps.children,
       menuItems: TEST_BOOKS.map((book) => ({
         id: book.id,
         children: book.title,
@@ -107,11 +110,13 @@ const menus = {
     },
     menuHeaderProps: {
       title: "Select Books",
+      children: <MenuSearchInput id="nested-search" name="nested-search" />,
     },
   },
   "books-select": {
     MenuComponent: SingleSelectMenu,
     menuProps: {
+      itemToString: (item) => item.menuItemProps.children,
       menuItems: TEST_BOOKS.map((book) => ({
         id: book.id,
         children: book.title,
@@ -119,6 +124,7 @@ const menus = {
     },
     menuHeaderProps: {
       title: "Select One Book",
+      children: <MenuSearchInput id="nested-search" name="nested-search" />,
     },
   },
   "edit-book": {
@@ -146,12 +152,16 @@ export const NestedMenuMultiLevelStory: Story = {
   name: "Multi Level NestedMenu",
   render: (args) => {
     return (
-      <NestedMenu
-        initialMenuId="root"
-        menus={menus}
-        backArrowLabel="Go Back"
-        menuToggleElement={<MenuToggleButton>Open Menu</MenuToggleButton>}
-      />
+      <MotionConfig reducedMotion="user">
+        <NestedMenu
+          initialMenuId="root"
+          menus={menus}
+          backArrowLabel="Go Back"
+          menuToggleElement={
+            <MenuToggleButton width="200px">Open Menu</MenuToggleButton>
+          }
+        />
+      </MotionConfig>
     );
   },
 };

package/src/NestedMenu/NestedMenu.tsx

@@ -1,15 +1,27 @@
-import React, { useState } from "react";
+import { useId, useEffect, useState } from "react";
+import { AnimatePresence, LayoutGroup, motion } from "motion/react";
+import { useSelect } from "downshift";
+
+import { useDownshiftDefaults } from "../hooks/useDownshiftDefaults";
+import { reduceReducers } from "../utils/reduceReducers";
+import { nestedMenuStateReducer } from "../reducers/nestedMenuStateReducer";
+import {
+  defaultMenuContext,
+  type TypeMenuContext,
+  type TypeDownshiftSelectProps,
+} from "../MenuContext";
 import type { TypeMenuItemProps } from "../MenuItem";
 import type {
   TypeNestedMenuItemProps,
   TypeNestedMenuProps,
 } from "./NestedMenuTypes";
-import { reduceReducers } from "../utils/reduceReducers";
-import { NestedMenuHeader } from "./NestedMenuHeader";
-import { nestedMenuStateReducer } from "../reducers/nestedMenuStateReducer";
 import { NestedMenuContent } from "./NestedMenuContent";
 import { NestedMenuProvider } from "./NestedMenuContext";
+import { NestedMenuHeader } from "./NestedMenuHeader";
 import { NestedMenuItem } from "./NestedMenuItem";
+import { MOTION_DURATION_FAST } from "@sproutsocial/seeds-motion/unitless";
+import { NestedMenuRoot } from "./NestedMenuRoot";
+import { NestedMenuPopout } from "./NestedMenuPopout";
 
 export const NestedMenu = <
   I extends TypeMenuItemProps = TypeNestedMenuItemProps
@@ -19,16 +31,93 @@ export const NestedMenu = <
   onBackButtonClick,
   backArrowLabel,
   menuToggleElement,
+  popoutProps = {},
+  width = "300px",
+  stateReducer: rootExternalStateReducer,
+  id: externalNestedMenuId,
+  ...useSelectProps
 }: TypeNestedMenuProps<I>) => {
+  /**
+   * Handling the Open/Close and accessibility of the NestedMenu itself
+   */
+  const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
+    isCombobox: false,
+  });
+  const uniqueId = useId();
+  const nestedMenuId = externalNestedMenuId ?? `nested-menu-${uniqueId}`;
+  const [hasLoadedOnce, setHasLoadedOnce] = useState(false);
+  const useSelectReturnProps = useSelect({
+    ...defaultDownshiftProps.select,
+    id: nestedMenuId,
+    items: [],
+    stateReducer: reduceReducers(
+      defaultDownshiftProps.select.stateReducer,
+      rootExternalStateReducer
+    ),
+    ...useSelectProps,
+  });
+
+  const rootMenuContextProps = {
+    ...useSelectProps,
+    ...useSelectReturnProps,
+    ...restDefaults,
+  };
+
+  useEffect(() => {
+    if (!useSelectReturnProps.isOpen) {
+      setHasLoadedOnce(false);
+    } else {
+      !hasLoadedOnce && setHasLoadedOnce(true);
+    }
+  }, [useSelectReturnProps.isOpen]);
+
+  // onNestedIsOpenChange handles closing the popout based on the selected menu's built in open/close logic.
+  const onNestedIsOpenChange: TypeDownshiftSelectProps["onIsOpenChange"] = ({
+    isOpen: newIsOpen,
+  }) => {
+    // Close the popout when a child menu's close logic is triggered
+    !newIsOpen && useSelectReturnProps.closeMenu?.();
+  };
+
+  const nestedMenuPropsFromRoot: Partial<TypeDownshiftSelectProps> = {
+    // The selected menu needs to receive this id so that the toggle element can be properly associated with it.
+    id: nestedMenuId,
+    onIsOpenChange: onNestedIsOpenChange,
+  };
+
+  /**
+   * Handling the state of the NestedMenu content
+   */
   const [selectedMenuPath, setSelectedMenuPath] = useState([initialMenuId]);
-  const selectedMenuId = selectedMenuPath[selectedMenuPath.length - 1];
+  const [activeMenuContext, setActiveMenuContext] =
+    useState<TypeMenuContext>(defaultMenuContext);
+  const [currentMenuId, setCurrentMenuId] = useState(initialMenuId);
+  const [isAdding, setIsAdding] = useState(false);
 
   const setSelectedMenuId = (id: string) => {
+    setIsAdding(true);
     setSelectedMenuPath((currentPath) => [...currentPath, id]);
   };
+
+  // Set the currentMenuId reactively after the selectedMenuPath changes, so that
+  // isAdding has time to be set before the animation starts.
+  useEffect(() => {
+    if (selectedMenuPath.length > 0) {
+      const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
+      setCurrentMenuId(newMenuId);
+    }
+  }, [selectedMenuPath.join("-")]);
+
+  const resetSelectedMenuPath = () => {
+    setSelectedMenuPath([initialMenuId]);
+    setCurrentMenuId(initialMenuId);
+  };
+
   const goBack = () => {
+    setIsAdding(false);
     setSelectedMenuPath((currentPath) => currentPath.slice(0, -1));
-    onBackButtonClick?.(selectedMenuId);
+    // user-defined callback
+    onBackButtonClick?.(currentMenuId);
   };
 
   const {
@@ -36,14 +125,14 @@ export const NestedMenu = <
     menuProps,
     MenuHeaderComponent = NestedMenuHeader,
     menuHeaderProps = {},
-  } = menus[selectedMenuId] || {};
+  } = menus[currentMenuId] || {};
+
   const {
     children,
     menuItems,
     MenuItemComponent,
     stateReducer: externalStateReducer,
-    onStateChange: externalOnStateChange,
-    ...props
+    ...restMenuProps
   } = menuProps || {};
 
   const stateReducer = reduceReducers(
@@ -51,52 +140,137 @@ export const NestedMenu = <
     externalStateReducer
   );
 
-  // Reactively reset the selected menu path when the menu closes
-  const onStateChange = (changes) => {
-    externalOnStateChange?.(changes);
-    if (changes.isOpen === false) {
-      // Wait for the menu to close before resetting to avoid flicker
-      setTimeout(() => {
-        setSelectedMenuPath([initialMenuId]);
-      }, 100);
-    }
+  const animationSpeed = MOTION_DURATION_FAST;
+
+  const contentVariants = {
+    arrive: (custom = { hasLoadedOnce: false, isAdding: false }) => ({
+      opacity: 0,
+      // Start from left if is first render of root, else use default
+      x: !custom?.hasLoadedOnce ? "200%" : custom?.isAdding ? "200%" : "-200%",
+    }),
+    enter: (custom = { hasLoadedOnce: false }) => ({
+      opacity: 1,
+      x: 0,
+      transition: {
+        type: "tween",
+        duration: animationSpeed,
+        ease: "circOut",
+        delay: !custom.hasLoadedOnce ? animationSpeed : 0,
+      },
+    }),
+    leave: (custom = { hasLoadedOnce: false, isAdding: false }) => ({
+      opacity: 0,
+      x: custom?.isAdding ? "-200%" : "200%",
+      transition: {
+        type: "tween",
+        duration: animationSpeed,
+        ease: "circIn",
+      },
+    }),
+  };
+
+  // This is suggested even though they are exactly the same
+  const menuVariants = {
+    arrive: (custom = { hasLoadedOnce: false, isAdding: false }) => ({
+      opacity: 0,
+      // Start from left if is first render of root, else use default
+      x: !custom?.hasLoadedOnce ? "200%" : custom?.isAdding ? "200%" : "-200%",
+    }),
+    enter: (custom = { hasLoadedOnce: false }) => ({
+      opacity: 1,
+      x: 0,
+      transition: {
+        type: "tween",
+        duration: animationSpeed,
+        ease: "circOut",
+        delay: !custom.hasLoadedOnce ? animationSpeed : 0,
+      },
+    }),
+    leave: (custom = { hasLoadedOnce: false, isAdding: false }) => ({
+      opacity: 0,
+      x: custom?.isAdding ? "-200%" : "200%",
+      transition: {
+        type: "tween",
+        duration: animationSpeed,
+        ease: "circIn",
+      },
+    }),
   };
 
   const nestedMenuProps = {
+    ...nestedMenuPropsFromRoot,
     menuToggleElement,
     stateReducer,
-    onStateChange,
-    initialIsOpen: selectedMenuPath.length > 1,
+    MenuRootComponent: NestedMenuRoot,
+    // This ensures that onNestedIsOpenChange will be triggered if the selected menu attempts to close itself.
+    initialIsOpen: true,
     children: (
-      <>
-        {/*This header can be suppressed by passing `null` for MenuHeaderComponent*/}
-        {MenuHeaderComponent && (
-          <MenuHeaderComponent
-            backArrowLabel={backArrowLabel}
-            {...menuHeaderProps}
-          />
-        )}
-        {/*children takes precedence over menuItems if both are passed.*/}
-        {children && children}
-        {menuItems && !children && (
-          <NestedMenuContent
-            menuItems={menuItems}
-            MenuItemComponent={MenuItemComponent ?? NestedMenuItem}
-          />
-        )}
-      </>
+      // Handles the smooth animating of the content
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={currentMenuId}
+          variants={contentVariants}
+          initial="arrive"
+          animate="enter"
+          exit="leave"
+          custom={{ isAdding, hasLoadedOnce }}
+        >
+          {MenuHeaderComponent && (
+            <MenuHeaderComponent
+              backArrowLabel={backArrowLabel}
+              {...menuHeaderProps}
+            />
+          )}
+          {/*children takes precedence over menuItems if both are passed.*/}
+          {children && children}
+          {menuItems && !children && (
+            <NestedMenuContent
+              menuItems={menuItems}
+              MenuItemComponent={MenuItemComponent ?? NestedMenuItem}
+            />
+          )}
+        </motion.div>
+      </AnimatePresence>
     ),
-    ...props,
+    ...restMenuProps,
   };
 
   return (
     <NestedMenuProvider
-      selectedMenuPath={selectedMenuPath}
-      setSelectedMenuPath={setSelectedMenuPath}
-      setSelectedMenuId={setSelectedMenuId}
-      goBack={goBack}
+      {...{
+        selectedMenuPath,
+        setSelectedMenuPath,
+        setSelectedMenuId,
+        resetSelectedMenuPath,
+        goBack,
+        rootMenuContextProps,
+        activeMenuContext,
+        setActiveMenuContext,
+        animationSpeed,
+      }}
     >
-      {MenuComponent && <MenuComponent {...nestedMenuProps} />}
+      <NestedMenuPopout
+        content={
+          MenuComponent && (
+            // Handles the rerender of the component
+            <AnimatePresence mode="wait">
+              <motion.div
+                key={`${currentMenuId}-content`}
+                variants={menuVariants}
+                initial="arrive"
+                animate="enter"
+                exit="leave"
+                custom={{ isAdding, hasLoadedOnce }}
+              >
+                <MenuComponent {...nestedMenuProps} />
+              </motion.div>
+            </AnimatePresence>
+          )
+        }
+        menuToggleElement={menuToggleElement}
+        width={width}
+        {...popoutProps}
+      />
     </NestedMenuProvider>
   );
 };

package/src/NestedMenu/NestedMenuContext.tsx

@@ -1,18 +1,34 @@
 import React, { createContext, useContext } from "react";
 import type { TypeNotEmptyChildren } from "../types";
+import {
+  defaultMenuContext,
+  type TypeMenuContext,
+  type TypeMenuContextProps,
+} from "../MenuContext";
+import { MOTION_DURATION_FAST } from "@sproutsocial/seeds-motion/unitless";
 
 export interface TypeNestedMenuContext {
   selectedMenuPath: string[];
   setSelectedMenuId?: (id: string) => void;
   setSelectedMenuPath?: (path: string[]) => void;
+  resetSelectedMenuPath?: () => void;
   goBack?: () => void;
+  rootMenuContextProps: Omit<TypeMenuContextProps, "items">;
+  activeMenuContext: TypeMenuContext;
+  setActiveMenuContext: (context: TypeMenuContext) => void;
+  animationSpeed: number;
 }
 
 const defaultNestedMenuContext: TypeNestedMenuContext = {
   selectedMenuPath: [],
   setSelectedMenuId: () => {},
   setSelectedMenuPath: () => {},
+  resetSelectedMenuPath: () => {},
   goBack: () => {},
+  rootMenuContextProps: {},
+  activeMenuContext: defaultMenuContext,
+  setActiveMenuContext: () => {},
+  animationSpeed: MOTION_DURATION_FAST,
 };
 
 export interface TypeNestedMenuProviderProps extends TypeNestedMenuContext {

package/src/NestedMenu/NestedMenuHeader.tsx

@@ -3,21 +3,34 @@ import { useNestedMenuContext } from "./NestedMenuContext";
 import { Button } from "@sproutsocial/seeds-react-button";
 import { Icon } from "@sproutsocial/seeds-react-icon";
 import type { TypeNestedMenuHeaderProps } from "./NestedMenuTypes";
+import { AnimatePresence, motion } from "motion/react";
 
 export const NestedMenuHeader = ({
   backArrowLabel,
   ...props
 }: TypeNestedMenuHeaderProps) => {
-  const { goBack, selectedMenuPath } = useNestedMenuContext();
+  const { goBack, selectedMenuPath, animationSpeed } = useNestedMenuContext();
   const showBackArrow = selectedMenuPath.length > 1;
   return (
     <MenuHeader
       leftAction={
-        showBackArrow ? (
-          <Button onClick={goBack} ariaLabel={backArrowLabel}>
-            <Icon name="arrow-left" />
-          </Button>
-        ) : undefined
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={`${selectedMenuPath}-header--button`}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{
+              opacity: 0,
+              transition: { duration: animationSpeed },
+            }}
+          >
+            {showBackArrow ? (
+              <Button onClick={goBack} ariaLabel={backArrowLabel}>
+                <Icon name="arrow-left" />
+              </Button>
+            ) : undefined}
+          </motion.div>
+        </AnimatePresence>
       }
       {...props}
     />

package/src/NestedMenu/NestedMenuPopout.tsx

@@ -0,0 +1,55 @@
+import { useNestedMenuContext } from "./NestedMenuContext";
+import {
+  MenuPopout,
+  type TypeMenuPopoutProps,
+  type TypeMenuRootProps,
+} from "../MenuRoot";
+import { MenuToggleProvider } from "../MenuContext";
+import { motion } from "motion/react";
+import styled from "styled-components";
+
+const StyledDiv = styled(motion.div)`
+  overflow: hidden;
+`;
+
+export const NestedMenuPopout = ({
+  content,
+  menuToggleElement,
+  width,
+  ...popoutProps
+}: Omit<TypeMenuPopoutProps, "children"> & {
+  menuToggleElement: TypeMenuRootProps["menuToggleElement"];
+}) => {
+  const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } =
+    useNestedMenuContext();
+
+  return (
+    <MenuPopout
+      {...popoutProps}
+      // Reset the selected menu path after the close animation completes
+      onClose={() => setTimeout(() => resetSelectedMenuPath?.(), 100)}
+      isOpen={!!rootMenuContextProps.isOpen}
+      openMenu={rootMenuContextProps.openMenu}
+      closeMenu={rootMenuContextProps.closeMenu}
+      width={width}
+      content={(props) => (
+        <StyledDiv layout="position">
+          {typeof content === "function" ? content(props) : content}
+        </StyledDiv>
+      )}
+    >
+      {(toggleProps) => (
+        <MenuToggleProvider
+          // rootMenuContextProps overrides activeMenuContext since it handles open/close logic
+          menuContext={{
+            ...activeMenuContext,
+            ...rootMenuContextProps,
+            ...toggleProps,
+          }}
+        >
+          {menuToggleElement}
+        </MenuToggleProvider>
+      )}
+    </MenuPopout>
+  );
+};

package/src/NestedMenu/NestedMenuRoot.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { type TypeMenuRootProps } from "../MenuRoot";
+import { MenuContentProvider, useMenu } from "../MenuContext";
+import { useNestedMenuContext } from "./NestedMenuContext";
+
+export const NestedMenuRoot = ({
+  children,
+  menuToggleElement,
+  ...contextProps
+}: TypeMenuRootProps) => {
+  const menuContext = useMenu(contextProps);
+  const { setActiveMenuContext, selectedMenuPath } = useNestedMenuContext();
+
+  React.useEffect(() => {
+    setActiveMenuContext(menuContext);
+  }, [
+    selectedMenuPath[selectedMenuPath.length - 1],
+    menuContext.selectedItem,
+    menuContext.selectedItems?.length,
+  ]);
+
+  return (
+    <MenuContentProvider menuContext={menuContext}>
+      {children}
+    </MenuContentProvider>
+  );
+};

package/src/NestedMenu/NestedMenuTypes.ts

@@ -4,7 +4,9 @@ import type { TypeSingleSelectMenuProps } from "../SingleSelectMenu";
 import type { TypeMenuItemProps } from "../MenuItem";
 import type { TypeMenuRootProps } from "../MenuRoot";
 import type { TypeMenuHeaderProps } from "../MenuHeader";
+import type { TypeActionMenuBaseProps } from "../ActionMenu";
 import type { TypeChildrenOrItems } from "../types";
+import type { TypePopoutProps } from "@sproutsocial/seeds-react-popout";
 
 export interface TypeNestedMenuMapProps<
   P,
@@ -30,9 +32,8 @@ export interface TypeNestedMenuItemProps extends TypeMenuItemProps {
 
 export interface TypeNestedMenuProps<
   I extends TypeMenuItemProps = TypeNestedMenuItemProps
-> {
+> extends Omit<TypeActionMenuBaseProps, "MenuRootComponent"> {
   initialMenuId: string;
-  menuToggleElement: TypeMenuRootProps["menuToggleElement"];
   onBackButtonClick?: (menuId: string) => void;
   /** Sets the default localized label for the back arrow in all child menus.
    *  This label can be overridden by including backArrowLabel in a menu's menuHeaderProps. */