@sproutsocial/seeds-react-menu 1.2.0 → 1.2.1

package/dist/index.d.mts

@@ -122,7 +122,7 @@ interface TypeMenuProviderProps {
     menuContext: TypeMenuContext;
 }
 interface TypeMenuToggleContext extends TypeMenuContext {
-    ref?: (arg0: React__default.ElementRef<any> | HTMLElement) => void;
+    ref?: React__default.RefObject<any> | ((arg0: React__default.ElementRef<any> | HTMLElement) => void);
     toggle?: () => void;
     show?: () => void;
     hide?: () => void;

package/dist/index.d.ts

@@ -122,7 +122,7 @@ interface TypeMenuProviderProps {
     menuContext: TypeMenuContext;
 }
 interface TypeMenuToggleContext extends TypeMenuContext {
-    ref?: (arg0: React__default.ElementRef<any> | HTMLElement) => void;
+    ref?: React__default.RefObject<any> | ((arg0: React__default.ElementRef<any> | HTMLElement) => void);
     toggle?: () => void;
     show?: () => void;
     hide?: () => void;

package/dist/index.js

@@ -2603,9 +2603,10 @@ var MenuGroup = ({
 MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
 
 // src/MenuRoot/MenuRoot.tsx
-var import_react10 = require("react");
+var import_react10 = __toESM(require("react"));
 var import_styled_components10 = __toESM(require("styled-components"));
 var import_seeds_react_popout = require("@sproutsocial/seeds-react-popout");
+var import_seeds_react_utilities = require("@sproutsocial/seeds-react-utilities");
 
 // ../../seeds-design-tokens/seeds-motion/dist/seeds-motion-unitless.esm.js
 var MOTION_DURATION_FAST = 0.15;
@@ -2682,7 +2683,7 @@ var MenuRoot = ({
   children,
   menuToggleElement,
   popoutProps: { placement = "bottom", focusLockProps, ...popoutProps } = {},
-  width: width2 = "300px",
+  width: width2,
   ...contextProps
 }) => {
   const {
@@ -2691,14 +2692,22 @@ var MenuRoot = ({
     closeMenu,
     inputValue,
     hiddenItemsCount = 0,
-    items
+    items,
+    getMenuProps
   } = contextProps;
-  const setIsOpen = (0, import_react10.useCallback)(
-    (newIsOpen) => {
-      newIsOpen ? openMenu?.() : closeMenu?.();
-    },
-    [openMenu, closeMenu]
-  );
+  const toggleElementRef = import_react10.default.useRef(null);
+  const [finalWidth, setFinalWidth] = import_react10.default.useState();
+  const min_width = 200;
+  (0, import_react10.useLayoutEffect)(() => {
+    if (width2) {
+      setFinalWidth(width2);
+    } else if (toggleElementRef.current?.offsetWidth) {
+      const toggleWidth = toggleElementRef.current.offsetWidth;
+      setFinalWidth(Math.max(toggleWidth, min_width));
+    } else {
+      setFinalWidth(min_width);
+    }
+  }, [width2, toggleElementRef.current?.offsetWidth]);
   (0, import_react10.useEffect)(() => {
     if (!inputValue) return;
     if (items && hiddenItemsCount >= items.length && isOpen) {
@@ -2706,6 +2715,7 @@ var MenuRoot = ({
     }
   }, [hiddenItemsCount, items?.length, isOpen, inputValue]);
   const menuContext = useMenu(contextProps);
+  getMenuProps?.({}, { suppressRefError: true });
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     MenuPopout,
     {
@@ -2714,8 +2724,22 @@ var MenuRoot = ({
       openMenu,
       closeMenu,
       content: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuContentProvider, { menuContext, children }),
+      width: finalWidth,
       ...popoutProps,
-      children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuToggleProvider, { menuContext: { ...menuContext, ...toggleProps }, children: menuToggleElement })
+      children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        MenuToggleProvider,
+        {
+          menuContext: {
+            ...menuContext,
+            ...toggleProps,
+            ref: (0, import_seeds_react_utilities.mergeRefs)(
+              toggleProps.ref,
+              toggleElementRef
+            )
+          },
+          children: menuToggleElement
+        }
+      )
     }
   );
 };
@@ -3017,7 +3041,7 @@ var MenuSearchTokenInput = ({
 var import_react17 = __toESM(require("react"));
 var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
 var import_seeds_react_box3 = require("@sproutsocial/seeds-react-box");
-var import_seeds_react_utilities = require("@sproutsocial/seeds-react-utilities");
+var import_seeds_react_utilities2 = require("@sproutsocial/seeds-react-utilities");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var SubmenuItemTrigger = ({
   id,
@@ -3026,7 +3050,7 @@ var SubmenuItemTrigger = ({
   ...rest
 }) => {
   const { getToggleButtonProps, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
-  const toggleRef = ref && innerRef ? (0, import_seeds_react_utilities.mergeRefs)([ref, innerRef].filter(Boolean)) : ref || innerRef;
+  const toggleRef = ref && innerRef ? (0, import_seeds_react_utilities2.mergeRefs)([ref, innerRef].filter(Boolean)) : ref || innerRef;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     MenuItem,
     {
@@ -4018,7 +4042,7 @@ var useNestedMenuContext = () => {
 
 // src/NestedMenu/NestedMenuContent.tsx
 var import_react29 = require("react");
-var import_seeds_react_utilities2 = require("@sproutsocial/seeds-react-utilities");
+var import_seeds_react_utilities3 = require("@sproutsocial/seeds-react-utilities");
 
 // src/NestedMenu/NestedMenuItem.tsx
 var import_seeds_react_icon5 = require("@sproutsocial/seeds-react-icon");
@@ -4059,7 +4083,7 @@ var NestedMenuContent = ({
   const { highlightedIndex, items } = useMenuContentContext();
   const { setSelectedMenuId, selectedMenuPath, goBack } = useNestedMenuContext();
   const internalRef = (0, import_react29.useRef)(null);
-  const innerRef = (0, import_seeds_react_utilities2.mergeRefs)(internalRef, innerRefProp);
+  const innerRef = (0, import_seeds_react_utilities3.mergeRefs)(internalRef, innerRefProp);
   const contentProps = children ? { children } : { menuItems, MenuItemComponent };
   (0, import_react29.useEffect)(() => {
     internalRef?.current?.focus();
@@ -4239,6 +4263,7 @@ var NestedMenu = ({
     id: nestedMenuId,
     onIsOpenChange: onNestedIsOpenChange
   };
+  rootMenuContextProps.getMenuProps?.({}, { suppressRefError: true });
   const [selectedMenuPath, setSelectedMenuPath] = (0, import_react33.useState)([initialMenuId]);
   const [activeMenuContext, setActiveMenuContext] = (0, import_react33.useState)(defaultMenuContext);
   const [currentMenuId, setCurrentMenuId] = (0, import_react33.useState)(initialMenuId);