@sproutsocial/seeds-react-menu 1.2.0 → 1.2.1

package/.turbo/turbo-build.log

@@ -84,14 +84,14 @@ ESM Build start
          ╵       ~~~~~~~~~
 
 
-CJS dist/index.js     140.15 KB
-CJS dist/index.js.map 361.00 KB
-CJS ⚡️ Build success in 717ms
-ESM dist/esm/index.js     130.58 KB
-ESM dist/esm/index.js.map 359.70 KB
-ESM ⚡️ Build success in 717ms
+CJS dist/index.js     140.98 KB
+CJS dist/index.js.map 362.59 KB
+CJS ⚡️ Build success in 539ms
+ESM dist/esm/index.js     131.36 KB
+ESM dist/esm/index.js.map 361.32 KB
+ESM ⚡️ Build success in 545ms
 DTS Build start
-DTS ⚡️ Build success in 15500ms
-DTS dist/index.d.ts  32.50 KB
-DTS dist/index.d.mts 32.50 KB
-Done in 18.95s.
+DTS ⚡️ Build success in 15626ms
+DTS dist/index.d.ts  32.53 KB
+DTS dist/index.d.mts 32.53 KB
+Done in 17.69s.

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @sproutsocial/seeds-react-menu
 
+## 1.2.1
+
+### Patch Changes
+
+- d309821: - Update all menus so that they set the menu width to the toggle width by default, with a minimum width of 200px
+  - Fix recently introduced bug that made the `width` prop stop working
+- 4bcd4f3: Fix error: "downshift: You forgot to call the getMenuProps getter function on your component / element."
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/esm/index.js

@@ -2547,9 +2547,14 @@ var MenuGroup = ({
 MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
 
 // src/MenuRoot/MenuRoot.tsx
-import { useCallback as useCallback2, useEffect } from "react";
+import React7, {
+  useCallback as useCallback2,
+  useEffect,
+  useLayoutEffect
+} from "react";
 import styled7 from "styled-components";
 import { Popout } from "@sproutsocial/seeds-react-popout";
+import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
 
 // ../../seeds-design-tokens/seeds-motion/dist/seeds-motion-unitless.esm.js
 var MOTION_DURATION_FAST = 0.15;
@@ -2626,7 +2631,7 @@ var MenuRoot = ({
   children,
   menuToggleElement,
   popoutProps: { placement = "bottom", focusLockProps, ...popoutProps } = {},
-  width: width2 = "300px",
+  width: width2,
   ...contextProps
 }) => {
   const {
@@ -2635,14 +2640,22 @@ var MenuRoot = ({
     closeMenu,
     inputValue,
     hiddenItemsCount = 0,
-    items
+    items,
+    getMenuProps
   } = contextProps;
-  const setIsOpen = useCallback2(
-    (newIsOpen) => {
-      newIsOpen ? openMenu?.() : closeMenu?.();
-    },
-    [openMenu, closeMenu]
-  );
+  const toggleElementRef = React7.useRef(null);
+  const [finalWidth, setFinalWidth] = React7.useState();
+  const min_width = 200;
+  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]);
   useEffect(() => {
     if (!inputValue) return;
     if (items && hiddenItemsCount >= items.length && isOpen) {
@@ -2650,6 +2663,7 @@ var MenuRoot = ({
     }
   }, [hiddenItemsCount, items?.length, isOpen, inputValue]);
   const menuContext = useMenu(contextProps);
+  getMenuProps?.({}, { suppressRefError: true });
   return /* @__PURE__ */ jsx10(
     MenuPopout,
     {
@@ -2658,8 +2672,22 @@ var MenuRoot = ({
       openMenu,
       closeMenu,
       content: /* @__PURE__ */ jsx10(MenuContentProvider, { menuContext, children }),
+      width: finalWidth,
       ...popoutProps,
-      children: (toggleProps) => /* @__PURE__ */ jsx10(MenuToggleProvider, { menuContext: { ...menuContext, ...toggleProps }, children: menuToggleElement })
+      children: (toggleProps) => /* @__PURE__ */ jsx10(
+        MenuToggleProvider,
+        {
+          menuContext: {
+            ...menuContext,
+            ...toggleProps,
+            ref: mergeRefs(
+              toggleProps.ref,
+              toggleElementRef
+            )
+          },
+          children: menuToggleElement
+        }
+      )
     }
   );
 };
@@ -2963,7 +2991,7 @@ var MenuSearchTokenInput = ({
 import React14 from "react";
 import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
 import { Box as Box3 } from "@sproutsocial/seeds-react-box";
-import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
+import { mergeRefs as mergeRefs2 } from "@sproutsocial/seeds-react-utilities";
 import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
 var SubmenuItemTrigger = ({
   id,
@@ -2972,7 +3000,7 @@ var SubmenuItemTrigger = ({
   ...rest
 }) => {
   const { getToggleButtonProps, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
-  const toggleRef = ref && innerRef ? mergeRefs([ref, innerRef].filter(Boolean)) : ref || innerRef;
+  const toggleRef = ref && innerRef ? mergeRefs2([ref, innerRef].filter(Boolean)) : ref || innerRef;
   return /* @__PURE__ */ jsx16(
     MenuItem,
     {
@@ -3966,7 +3994,7 @@ var useNestedMenuContext = () => {
 
 // src/NestedMenu/NestedMenuContent.tsx
 import { useEffect as useEffect4, useRef } from "react";
-import { mergeRefs as mergeRefs2 } from "@sproutsocial/seeds-react-utilities";
+import { mergeRefs as mergeRefs3 } from "@sproutsocial/seeds-react-utilities";
 
 // src/NestedMenu/NestedMenuItem.tsx
 import { Icon as Icon5 } from "@sproutsocial/seeds-react-icon";
@@ -4007,7 +4035,7 @@ var NestedMenuContent = ({
   const { highlightedIndex, items } = useMenuContentContext();
   const { setSelectedMenuId, selectedMenuPath, goBack } = useNestedMenuContext();
   const internalRef = useRef(null);
-  const innerRef = mergeRefs2(internalRef, innerRefProp);
+  const innerRef = mergeRefs3(internalRef, innerRefProp);
   const contentProps = children ? { children } : { menuItems, MenuItemComponent };
   useEffect4(() => {
     internalRef?.current?.focus();
@@ -4187,6 +4215,7 @@ var NestedMenu = ({
     id: nestedMenuId,
     onIsOpenChange: onNestedIsOpenChange
   };
+  rootMenuContextProps.getMenuProps?.({}, { suppressRefError: true });
   const [selectedMenuPath, setSelectedMenuPath] = useState([initialMenuId]);
   const [activeMenuContext, setActiveMenuContext] = useState(defaultMenuContext);
   const [currentMenuId, setCurrentMenuId] = useState(initialMenuId);