@sproutsocial/seeds-react-menu 1.1.1 → 1.2.1

package/.turbo/turbo-build.log

@@ -84,14 +84,14 @@ ESM Build start
          ╵       ~~~~~~~~~
 
 
-ESM dist/esm/index.js     129.91 KB
-ESM dist/esm/index.js.map 358.55 KB
-ESM ⚡️ Build success in 657ms
-CJS dist/index.js     139.19 KB
-CJS dist/index.js.map 359.73 KB
-CJS ⚡️ Build success in 673ms
+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 11751ms
-DTS dist/index.d.ts  32.38 KB
-DTS dist/index.d.mts 32.38 KB
-Done in 15.25s.
+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,25 @@
 # @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
+
+- 34ef27e: Added an `AutocompleteSelect` component that combines autocomplete behavior with the appearance of a `Select`.
+
+### Patch Changes
+
+- 9fdb2f8: Supports onClick prop on a NestedMenuItem without a childMenuId
+  - Fixes a bug where the onClick prop on a NestedMenuItem would not be triggered unless the item had a childMenuId
+- 64c536e: Adjust focus styling due to a bug where focus appeared on MenuContent when focus is applied at global level
+
 ## 1.1.1
 
 ### Patch Changes

package/dist/esm/index.js

@@ -2121,7 +2121,11 @@ import styled3 from "styled-components";
 var StyledMenuContent = styled3.ul`
   margin: 0;
   padding: 0;
-  outline: none;
+
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
 `;
 
 // src/hooks/useMenuChildren.tsx
@@ -2543,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;
@@ -2622,7 +2631,7 @@ var MenuRoot = ({
   children,
   menuToggleElement,
   popoutProps: { placement = "bottom", focusLockProps, ...popoutProps } = {},
-  width: width2 = "300px",
+  width: width2,
   ...contextProps
 }) => {
   const {
@@ -2631,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) {
@@ -2646,6 +2663,7 @@ var MenuRoot = ({
     }
   }, [hiddenItemsCount, items?.length, isOpen, inputValue]);
   const menuContext = useMenu(contextProps);
+  getMenuProps?.({}, { suppressRefError: true });
   return /* @__PURE__ */ jsx10(
     MenuPopout,
     {
@@ -2654,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
+        }
+      )
     }
   );
 };
@@ -2959,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,
@@ -2968,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,
     {
@@ -3872,8 +3904,29 @@ var AutocompleteTokenInput = ({
   );
 };
 
+// src/Autocomplete/AutocompleteSelect.tsx
+import Icon4 from "@sproutsocial/seeds-react-icon";
+import "react";
+import styled10 from "styled-components";
+import { Accessory } from "@sproutsocial/seeds-react-input";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var StyledAutocompleteInput = styled10(AutocompleteInput)`
+  ${Accessory} {
+    pointer-events: none;
+  }
+`;
+var AutocompleteSelect = (props) => {
+  return /* @__PURE__ */ jsx26(
+    StyledAutocompleteInput,
+    {
+      elemAfter: /* @__PURE__ */ jsx26(Icon4, { name: "chevron-down" }),
+      ...props
+    }
+  );
+};
+
 // src/NestedMenu/NestedMenu.tsx
-import { useId, useEffect as useEffect4, useState } from "react";
+import { useId, useEffect as useEffect5, useState } from "react";
 import { AnimatePresence as AnimatePresence2, motion as motion3 } from "motion/react";
 import { useSelect as useSelect6 } from "downshift";
 
@@ -3903,7 +3956,7 @@ var nestedMenuStateReducer = (_state, actionAndChanges) => {
 
 // src/NestedMenu/NestedMenuContext.tsx
 import { createContext as createContext2, useContext as useContext5 } from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var defaultNestedMenuContext = {
   selectedMenuPath: [],
   setSelectedMenuId: () => {
@@ -3927,7 +3980,7 @@ var NestedMenuProvider = ({
   children,
   ...nestedMenuProps
 }) => {
-  return /* @__PURE__ */ jsx26(NestedMenuContext.Provider, { value: nestedMenuProps, children });
+  return /* @__PURE__ */ jsx27(NestedMenuContext.Provider, { value: nestedMenuProps, children });
 };
 var useNestedMenuContext = () => {
   const nestedMenuContextValue = useContext5(NestedMenuContext);
@@ -3940,13 +3993,13 @@ var useNestedMenuContext = () => {
 };
 
 // src/NestedMenu/NestedMenuContent.tsx
-import { useEffect as useEffect3, useRef } from "react";
-import { mergeRefs as mergeRefs2 } from "@sproutsocial/seeds-react-utilities";
+import { useEffect as useEffect4, useRef } from "react";
+import { mergeRefs as mergeRefs3 } from "@sproutsocial/seeds-react-utilities";
 
 // src/NestedMenu/NestedMenuItem.tsx
-import { Icon as Icon4 } from "@sproutsocial/seeds-react-icon";
+import { Icon as Icon5 } from "@sproutsocial/seeds-react-icon";
 import { Box as Box4 } from "@sproutsocial/seeds-react-box";
-import { jsx as jsx27, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs6 } from "react/jsx-runtime";
 var NestedMenuItem = ({
   children,
   childMenuId,
@@ -3954,21 +4007,23 @@ var NestedMenuItem = ({
   ...rest
 }) => {
   const { setSelectedMenuId } = useNestedMenuContext();
-  const onClickProps = childMenuId ? {
+  const onClickProps = childMenuId || onClickProp ? {
     onClick: (e) => {
       onClickProp?.(e);
-      setSelectedMenuId?.(childMenuId);
+      if (childMenuId) {
+        setSelectedMenuId?.(childMenuId);
+      }
     }
   } : {};
-  return /* @__PURE__ */ jsx27(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ jsxs6(Box4, { display: "flex", justifyContent: "space-between", children: [
+  return /* @__PURE__ */ jsx28(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ jsxs6(Box4, { display: "flex", justifyContent: "space-between", children: [
     children,
-    childMenuId && /* @__PURE__ */ jsx27(MenuItemActionRight, { children: /* @__PURE__ */ jsx27(Icon4, { name: "arrow-right-outline" }) })
+    childMenuId && /* @__PURE__ */ jsx28(MenuItemActionRight, { children: /* @__PURE__ */ jsx28(Icon5, { name: "arrow-right-outline" }) })
   ] }) });
 };
 NestedMenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/NestedMenu/NestedMenuContent.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var NestedMenuContent = ({
   innerRef: innerRefProp = null,
   onKeyDown: onKeyDownProp,
@@ -3980,9 +4035,9 @@ 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 };
-  useEffect3(() => {
+  useEffect4(() => {
     internalRef?.current?.focus();
   }, []);
   const onKeyDown = (e) => {
@@ -4005,7 +4060,7 @@ var NestedMenuContent = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     MenuContent,
     {
       onKeyDown,
@@ -4019,19 +4074,19 @@ NestedMenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 
 // src/NestedMenu/NestedMenuHeader.tsx
 import { Button as Button2 } from "@sproutsocial/seeds-react-button";
-import { Icon as Icon5 } from "@sproutsocial/seeds-react-icon";
+import { Icon as Icon6 } from "@sproutsocial/seeds-react-icon";
 import { AnimatePresence, motion } from "motion/react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var NestedMenuHeader = ({
   backArrowLabel,
   ...props
 }) => {
   const { goBack, selectedMenuPath, animationSpeed } = useNestedMenuContext();
   const showBackArrow = selectedMenuPath.length > 1;
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     MenuHeader,
     {
-      leftAction: /* @__PURE__ */ jsx29(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx29(
+      leftAction: /* @__PURE__ */ jsx30(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx30(
         motion.div,
         {
           initial: { opacity: 0 },
@@ -4040,7 +4095,7 @@ var NestedMenuHeader = ({
             opacity: 0,
             transition: { duration: animationSpeed }
           },
-          children: showBackArrow ? /* @__PURE__ */ jsx29(Button2, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ jsx29(Icon5, { name: "arrow-left" }) }) : void 0
+          children: showBackArrow ? /* @__PURE__ */ jsx30(Button2, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ jsx30(Icon6, { name: "arrow-left" }) }) : void 0
         },
         `${selectedMenuPath}-header--button`
       ) }),
@@ -4050,8 +4105,8 @@ var NestedMenuHeader = ({
 };
 
 // src/NestedMenu/NestedMenuRoot.tsx
-import React24 from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import React25 from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var NestedMenuRoot = ({
   children,
   menuToggleElement,
@@ -4059,21 +4114,21 @@ var NestedMenuRoot = ({
 }) => {
   const menuContext = useMenu(contextProps);
   const { setActiveMenuContext, selectedMenuPath } = useNestedMenuContext();
-  React24.useEffect(() => {
+  React25.useEffect(() => {
     setActiveMenuContext(menuContext);
   }, [
     selectedMenuPath[selectedMenuPath.length - 1],
     menuContext.selectedItem,
     menuContext.selectedItems?.length
   ]);
-  return /* @__PURE__ */ jsx30(MenuContentProvider, { menuContext, children });
+  return /* @__PURE__ */ jsx31(MenuContentProvider, { menuContext, children });
 };
 
 // src/NestedMenu/NestedMenuPopout.tsx
 import { motion as motion2 } from "motion/react";
-import styled10 from "styled-components";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var StyledDiv = styled10(motion2.div)`
+import styled11 from "styled-components";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var StyledDiv = styled11(motion2.div)`
   overflow: hidden;
 `;
 var NestedMenuPopout = ({
@@ -4083,7 +4138,7 @@ var NestedMenuPopout = ({
   ...popoutProps
 }) => {
   const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } = useNestedMenuContext();
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     MenuPopout,
     {
       ...popoutProps,
@@ -4092,8 +4147,8 @@ var NestedMenuPopout = ({
       openMenu: rootMenuContextProps.openMenu,
       closeMenu: rootMenuContextProps.closeMenu,
       width: width2,
-      content: (props) => /* @__PURE__ */ jsx31(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
-      children: (toggleProps) => /* @__PURE__ */ jsx31(
+      content: (props) => /* @__PURE__ */ jsx32(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
+      children: (toggleProps) => /* @__PURE__ */ jsx32(
         MenuToggleProvider,
         {
           menuContext: {
@@ -4109,7 +4164,7 @@ var NestedMenuPopout = ({
 };
 
 // src/NestedMenu/NestedMenu.tsx
-import { jsx as jsx32, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs7 } from "react/jsx-runtime";
 var NestedMenu = ({
   initialMenuId,
   menus,
@@ -4143,7 +4198,7 @@ var NestedMenu = ({
     ...useSelectReturnProps,
     ...restDefaults
   };
-  useEffect4(() => {
+  useEffect5(() => {
     if (!useSelectReturnProps.isOpen) {
       setHasLoadedOnce(false);
     } else {
@@ -4160,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);
@@ -4168,7 +4224,7 @@ var NestedMenu = ({
     setIsAdding(true);
     setSelectedMenuPath((currentPath) => [...currentPath, id]);
   };
-  useEffect4(() => {
+  useEffect5(() => {
     if (selectedMenuPath.length > 0) {
       const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
       setCurrentMenuId(newMenuId);
@@ -4262,7 +4318,7 @@ var NestedMenu = ({
     initialIsOpen: true,
     children: (
       // Handles the smooth animating of the content
-      /* @__PURE__ */ jsx32(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsx33(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsxs7(
         motion3.div,
         {
           variants: contentVariants,
@@ -4271,7 +4327,7 @@ var NestedMenu = ({
           exit: "leave",
           custom: { isAdding, hasLoadedOnce },
           children: [
-            MenuHeaderComponent && /* @__PURE__ */ jsx32(
+            MenuHeaderComponent && /* @__PURE__ */ jsx33(
               MenuHeaderComponent,
               {
                 backArrowLabel,
@@ -4279,7 +4335,7 @@ var NestedMenu = ({
               }
             ),
             children && children,
-            menuItems && !children && /* @__PURE__ */ jsx32(
+            menuItems && !children && /* @__PURE__ */ jsx33(
               NestedMenuContent,
               {
                 menuItems,
@@ -4293,7 +4349,7 @@ var NestedMenu = ({
     ),
     ...restMenuProps
   };
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     NestedMenuProvider,
     {
       ...{
@@ -4307,11 +4363,11 @@ var NestedMenu = ({
         setActiveMenuContext,
         animationSpeed
       },
-      children: /* @__PURE__ */ jsx32(
+      children: /* @__PURE__ */ jsx33(
         NestedMenuPopout,
         {
           content: MenuComponent && // Handles the rerender of the component
-          /* @__PURE__ */ jsx32(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsx33(
             motion3.div,
             {
               variants: menuVariants,
@@ -4319,7 +4375,7 @@ var NestedMenu = ({
               animate: "enter",
               exit: "leave",
               custom: { isAdding, hasLoadedOnce },
-              children: /* @__PURE__ */ jsx32(MenuComponent, { ...nestedMenuProps })
+              children: /* @__PURE__ */ jsx33(MenuComponent, { ...nestedMenuProps })
             },
             `${currentMenuId}-content`
           ) }),
@@ -4335,6 +4391,7 @@ export {
   ActionMenu,
   Autocomplete,
   AutocompleteInput,
+  AutocompleteSelect,
   AutocompleteTokenInput,
   CustomPopoutContent,
   INPUT_TYPES,