@sproutsocial/seeds-react-menu 1.2.0 → 1.2.1

package/package.json

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

package/src/Autocomplete/Autocomplete.stories.tsx

@@ -108,7 +108,7 @@ export const AutocompleteTextWithButtonExample: Story = {
               Choose a book
             </MenuLabel>
             <Box display="flex" alignItems="center" gap={200}>
-              <AutocompleteInput />
+              <AutocompleteInput style={{ flex: 2 }} />
               <MenuToggleButton>
                 <Icon name="chevron-down" aria-label="Open Menu" />
               </MenuToggleButton>

package/src/MenuContext.tsx

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

package/src/MenuRoot/MenuRoot.tsx

@@ -1,6 +1,12 @@
-import React, { useCallback, useEffect } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  type RefObject,
+} from "react";
 import styled from "styled-components";
 import { Popout, type TypePopoutProps } from "@sproutsocial/seeds-react-popout";
+import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
 
 import {
   MenuContentProvider,
@@ -111,7 +117,7 @@ export const MenuRoot = ({
   children,
   menuToggleElement,
   popoutProps: { placement = "bottom", focusLockProps, ...popoutProps } = {},
-  width = "300px",
+  width,
   ...contextProps
 }: TypeMenuRootProps) => {
   const {
@@ -121,17 +127,27 @@ export const MenuRoot = ({
     inputValue,
     hiddenItemsCount = 0,
     items,
+    getMenuProps,
   } = contextProps;
-  const setIsOpen = useCallback(
-    (newIsOpen: boolean) => {
-      newIsOpen ? openMenu?.() : closeMenu?.();
-    },
-    [openMenu, closeMenu]
-  );
+
+  const toggleElementRef = React.useRef<HTMLElement>(null);
+  const [finalWidth, setFinalWidth] = React.useState<typeof width>();
+
+  const min_width = 200;
+
+  useLayoutEffect(() => {
+    if (width) {
+      setFinalWidth(width);
+    } else if (toggleElementRef.current?.offsetWidth) {
+      const toggleWidth = toggleElementRef.current.offsetWidth;
+      setFinalWidth(Math.max(toggleWidth, min_width));
+    } else {
+      setFinalWidth(min_width);
+    }
+  }, [width, toggleElementRef.current?.offsetWidth]);
 
   useEffect(() => {
     if (!inputValue) return;
-
     if (items && hiddenItemsCount >= items.length && isOpen) {
       closeMenu?.();
     }
@@ -139,6 +155,9 @@ export const MenuRoot = ({
 
   const menuContext = useMenu(contextProps);
 
+  // Hack to suppress error: "downshift: You forgot to call the getMenuProps getter function on your component / element."
+  getMenuProps?.({}, { suppressRefError: true });
+
   return (
     <MenuPopout
       placement={placement}
@@ -150,10 +169,20 @@ export const MenuRoot = ({
           {children}
         </MenuContentProvider>
       }
+      width={finalWidth}
       {...popoutProps}
     >
       {(toggleProps) => (
-        <MenuToggleProvider menuContext={{ ...menuContext, ...toggleProps }}>
+        <MenuToggleProvider
+          menuContext={{
+            ...menuContext,
+            ...toggleProps,
+            ref: mergeRefs<HTMLElement>(
+              toggleProps.ref,
+              toggleElementRef
+            ) as RefObject<HTMLElement>,
+          }}
+        >
           {menuToggleElement}
         </MenuToggleProvider>
       )}

package/src/NestedMenu/NestedMenu.tsx

@@ -85,6 +85,9 @@ export const NestedMenu = <
     onIsOpenChange: onNestedIsOpenChange,
   };
 
+  // Hack to suppress error: "downshift: You forgot to call the getMenuProps getter function on your component / element."
+  rootMenuContextProps.getMenuProps?.({}, { suppressRefError: true });
+
   /**
    * Handling the state of the NestedMenu content
    */