@sproutsocial/seeds-react-menu 1.5.1 → 1.6.0

package/package.json

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

package/src/MenuContent/DefaultMenuEmptyState.tsx

@@ -1,17 +1,21 @@
 import styled from "styled-components";
+import { Box, type TypeBoxProps } from "@sproutsocial/seeds-react-box";
 
-const StyledEmptyState = styled.div`
+export interface TypeDefaultMenuEmptyStateProps extends TypeBoxProps {
+  children?: React.ReactNode;
+}
+
+const StyledEmptyState = styled(Box)`
   padding: ${({ theme }) => theme.space[350]};
   text-align: center;
   font-size: ${({ theme }) => theme.typography[200].fontSize};
 `;
 
 const DefaultMenuEmptyState = ({
-  children,
-}: {
-  children?: React.ReactNode;
-}) => {
-  return <StyledEmptyState>{children || "No results found."}</StyledEmptyState>;
+  children = "No items found",
+  ...props
+}: TypeDefaultMenuEmptyStateProps) => {
+  return <StyledEmptyState {...props}>{children}</StyledEmptyState>;
 };
 
 export { DefaultMenuEmptyState };

package/src/MenuContent/index.tsx

@@ -1,2 +1,3 @@
-export { MenuContent } from "./MenuContent";
-export type { TypeMenuContentProps } from "./MenuContentTypes";
+export * from "./MenuContent";
+export * from "./DefaultMenuEmptyState";
+export * from "./MenuContentTypes";

package/src/NestedMenu/NestedMenu.tsx

@@ -1,4 +1,4 @@
-import { useId, useEffect, useState } from "react";
+import { useId, useEffect, useState, useRef } from "react";
 import { AnimatePresence, motion } from "motion/react";
 import { useSelect } from "downshift";
 
@@ -99,8 +99,7 @@ export const NestedMenu = <
     useState<TypeMenuContext>(defaultMenuContext);
   const [currentMenuId, setCurrentMenuId] = useState(initialMenuId);
   const [isAdding, setIsAdding] = useState(false);
-  const [popoutUpdateRef, setPopoutUpdateRef] =
-    useState<() => void | undefined>();
+  const popoutUpdateRef = useRef<() => void | undefined>();
 
   const setSelectedMenuId = (id: string) => {
     setIsAdding(true);
@@ -113,7 +112,6 @@ export const NestedMenu = <
     if (selectedMenuPath.length > 0) {
       const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
       setCurrentMenuId(newMenuId);
-      popoutUpdateRef?.();
     }
   }, [selectedMenuPath.join("-")]);
 
@@ -244,6 +242,11 @@ export const NestedMenu = <
     ...restMenuProps,
   };
 
+  // Update the popout position when the nestedMenuProps.children change.
+  useEffect(() => {
+    popoutUpdateRef.current?.();
+  }, [nestedMenuProps.children]);
+
   return (
     <NestedMenuProvider
       {...{
@@ -279,7 +282,7 @@ export const NestedMenu = <
         menuToggleElement={menuToggleElement}
         width={width}
         scheduleUpdateRef={(callback) => {
-          setPopoutUpdateRef(callback);
+          popoutUpdateRef.current = callback;
           externalPopoutUpdateRef?.(callback);
         }}
         {...restPopoutProps}