@sproutsocial/seeds-react-menu 1.3.2 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/MenuContent/MenuContentTypes.ts

@@ -1,9 +1,30 @@
+import type {
+  TypeBorderSystemProps,
+  TypeColorSystemProps,
+  TypeFlexboxSystemProps,
+  TypeGridSystemProps,
+  TypeLayoutSystemProps,
+  TypePositionSystemProps,
+  TypeSpaceSystemProps,
+  TypeStyledComponentsCommonProps,
+} from "@sproutsocial/seeds-react-system-props";
 import type { TypeMenuItemProps } from "../MenuItem";
 import type { TypeChildrenOrItems } from "../types";
 
+export interface TypeMenuContentContainerProps
+  extends Omit<React.ComponentPropsWithoutRef<"ul">, "children" | "color">,
+    TypeStyledComponentsCommonProps,
+    TypeBorderSystemProps,
+    TypeColorSystemProps,
+    TypeFlexboxSystemProps,
+    TypeGridSystemProps,
+    TypeLayoutSystemProps,
+    TypeSpaceSystemProps,
+    TypePositionSystemProps {}
+
 export type TypeMenuContentProps<
   I extends TypeMenuItemProps = TypeMenuItemProps
-> = Omit<React.ComponentPropsWithoutRef<"ul">, "children"> & {
+> = TypeMenuContentContainerProps & {
   innerRef?: React.Ref<HTMLUListElement>;
   /* Custom component to display when no menu items are visible (e.g. "No results found"). */
   emptyStateElement?: React.ReactNode;

package/src/MenuContent/styles.tsx

@@ -1,11 +1,30 @@
 import styled from "styled-components";
+import {
+  border,
+  color,
+  flexbox,
+  grid,
+  layout,
+  position,
+  space,
+} from "styled-system";
+import type { TypeMenuContentProps } from "./MenuContentTypes";
 
-export const StyledMenuContent = styled.ul`
+export const StyledMenuContent = styled.ul<TypeMenuContentProps>`
   margin: 0;
   padding: 0;
+  overflow: auto;
 
   &:focus {
     outline: none;
     box-shadow: none;
   }
+
+  ${border}
+  ${color}
+  ${flexbox}
+  ${grid}
+  ${layout}
+  ${space}
+  ${position}
 `;

package/src/MenuRoot/MenuRoot.tsx

@@ -39,9 +39,11 @@ export const CustomPopoutContent = styled(Popout.Content)`
   padding: 0;
   margin-left: 0;
   margin-right: 0;
+  overflow: hidden;
 `;
 
 const menuAnimationConfig = {
+  layout: true,
   initial: {
     scale: 0,
     opacity: 0,

package/src/NestedMenu/NestedMenu.stories.tsx

@@ -13,6 +13,7 @@ import {
   MultiSelectMenu,
   NestedMenu,
   MenuSearchInput,
+  MenuSearchTokenInput,
 } from "../index";
 import { NestedMenuItem } from "./NestedMenuItem";
 import { NestedMenuContent } from "./NestedMenuContent";
@@ -89,11 +90,16 @@ const menus = {
   "books-action": {
     MenuComponent: ActionMenu,
     menuProps: {
-      menuItems: TEST_BOOKS.map((book) => ({
-        id: book.id,
-        children: book.title,
-        childMenuId: "edit-book",
-      })),
+      children: (
+        <NestedMenuContent
+          menuItems={TEST_BOOKS.map((book) => ({
+            id: book.id,
+            children: book.title,
+            childMenuId: "edit-book",
+          }))}
+          // maxHeight="300px"
+        />
+      ),
     },
     menuHeaderProps: {
       title: "Manage Books",
@@ -103,24 +109,36 @@ const menus = {
     MenuComponent: MultiSelectMenu,
     menuProps: {
       itemToString: (item) => item.menuItemProps.children,
-      menuItems: TEST_BOOKS.map((book) => ({
-        id: book.id,
-        children: book.title,
-      })),
+      children: (
+        <NestedMenuContent
+          menuItems={TEST_BOOKS.map((book) => ({
+            id: book.id,
+            children: book.title,
+          }))}
+          // maxHeight="300px"
+        />
+      ),
     },
     menuHeaderProps: {
       title: "Select Books",
-      children: <MenuSearchInput id="nested-search" name="nested-search" />,
+      children: (
+        <MenuSearchTokenInput 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,
-      })),
+      children: (
+        <NestedMenuContent
+          menuItems={TEST_BOOKS.map((book) => ({
+            id: book.id,
+            children: book.title,
+          }))}
+          // maxHeight="300px"
+        />
+      ),
     },
     menuHeaderProps: {
       title: "Select One Book",
@@ -167,6 +185,9 @@ export const NestedMenuMultiLevelStory: Story = {
             menuToggleElement={
               <MenuToggleButton width="200px">Open Menu</MenuToggleButton>
             }
+            popoutProps={{
+              placement: "top",
+            }}
           />
         </Box>
       </MotionConfig>

package/src/NestedMenu/NestedMenu.tsx

@@ -1,5 +1,5 @@
 import { useId, useEffect, useState } from "react";
-import { AnimatePresence, LayoutGroup, motion } from "motion/react";
+import { AnimatePresence, motion } from "motion/react";
 import { useSelect } from "downshift";
 
 import { useDownshiftDefaults } from "../hooks/useDownshiftDefaults";
@@ -31,7 +31,10 @@ export const NestedMenu = <
   onBackButtonClick,
   backArrowLabel,
   menuToggleElement,
-  popoutProps = {},
+  popoutProps: {
+    scheduleUpdateRef: externalPopoutUpdateRef,
+    ...restPopoutProps
+  } = {},
   width = "300px",
   stateReducer: rootExternalStateReducer,
   id: externalNestedMenuId,
@@ -96,6 +99,8 @@ export const NestedMenu = <
     useState<TypeMenuContext>(defaultMenuContext);
   const [currentMenuId, setCurrentMenuId] = useState(initialMenuId);
   const [isAdding, setIsAdding] = useState(false);
+  const [popoutUpdateRef, setPopoutUpdateRef] =
+    useState<() => void | undefined>();
 
   const setSelectedMenuId = (id: string) => {
     setIsAdding(true);
@@ -108,6 +113,7 @@ export const NestedMenu = <
     if (selectedMenuPath.length > 0) {
       const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
       setCurrentMenuId(newMenuId);
+      popoutUpdateRef?.();
     }
   }, [selectedMenuPath.join("-")]);
 
@@ -272,7 +278,11 @@ export const NestedMenu = <
         }
         menuToggleElement={menuToggleElement}
         width={width}
-        {...popoutProps}
+        scheduleUpdateRef={(callback) => {
+          setPopoutUpdateRef(callback);
+          externalPopoutUpdateRef?.(callback);
+        }}
+        {...restPopoutProps}
       />
     </NestedMenuProvider>
   );

package/src/NestedMenu/NestedMenuPopout.tsx

@@ -16,6 +16,7 @@ export const NestedMenuPopout = ({
   content,
   menuToggleElement,
   width,
+  onClose,
   ...popoutProps
 }: Omit<TypeMenuPopoutProps, "children"> & {
   menuToggleElement: TypeMenuRootProps["menuToggleElement"];
@@ -25,9 +26,13 @@ export const NestedMenuPopout = ({
 
   return (
     <MenuPopout
-      {...popoutProps}
+      // TODO: add after prop is added to Popout
+      // lockPlacement
       // Reset the selected menu path after the close animation completes
-      onClose={() => setTimeout(() => resetSelectedMenuPath?.(), 100)}
+      onClose={() => {
+        onClose?.();
+        setTimeout(() => resetSelectedMenuPath?.(), 100);
+      }}
       isOpen={!!rootMenuContextProps.isOpen}
       openMenu={rootMenuContextProps.openMenu}
       closeMenu={rootMenuContextProps.closeMenu}
@@ -37,6 +42,7 @@ export const NestedMenuPopout = ({
           {typeof content === "function" ? content(props) : content}
         </StyledDiv>
       )}
+      {...popoutProps}
     >
       {(toggleProps) => (
         <MenuToggleProvider