@sproutsocial/seeds-react-menu 1.1.1 → 1.2.1

package/package.json

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

package/src/Autocomplete/Autocomplete.stories.tsx

@@ -12,6 +12,7 @@ import {
   MenuLabel,
   MenuToggleButton,
   type TypeInternalItemProps,
+  AutocompleteSelect,
 } from "../index";
 // eslint-disable-next-line no-restricted-imports
 import { TEST_BOOKS } from "../__fixtures__/menu-test-data";
@@ -107,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>
@@ -161,6 +162,34 @@ export const AutocompleteTokenInputExample: Story = {
   },
 };
 
+export const AutocompleteSelectExample: Story = {
+  name: "Autocomplete Select",
+  render: (args) => {
+    return (
+      <Autocomplete
+        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+        menuToggleElement={
+          <>
+            <MenuLabel htmlFor="my-combobox" mb={300}>
+              Choose a book
+            </MenuLabel>
+            <AutocompleteSelect />
+          </>
+        }
+        {...(args as object)}
+      >
+        <MenuContent>
+          {TEST_BOOKS.map(({ id, title }) => (
+            <MenuItem key={id} id={id}>
+              {title}
+            </MenuItem>
+          ))}
+        </MenuContent>
+      </Autocomplete>
+    );
+  },
+};
+
 const TestControlledSingleAutocomplete = ({
   ...args
 }: CustomAutocompleteArgs) => {

package/src/Autocomplete/AutocompleteSelect.tsx

@@ -0,0 +1,24 @@
+import Icon from "@sproutsocial/seeds-react-icon";
+import React from "react";
+
+import {
+  AutocompleteInput,
+  type TypeAutocompleteInputProps,
+} from "./AutocompleteInput";
+import styled from "styled-components";
+import { Accessory } from "@sproutsocial/seeds-react-input";
+
+const StyledAutocompleteInput = styled(AutocompleteInput)`
+  ${Accessory} {
+    pointer-events: none;
+  }
+`;
+
+export const AutocompleteSelect = (props: TypeAutocompleteInputProps) => {
+  return (
+    <StyledAutocompleteInput
+      elemAfter={<Icon name="chevron-down" />}
+      {...props}
+    />
+  );
+};

package/src/Autocomplete/SingleAutocomplete.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useCombobox } from "downshift";
 import { useMenuChildren } from "../hooks/useMenuChildren";
 import { itemToString as defaultItemToString } from "../utils/downshiftDefaults";

package/src/Autocomplete/index.ts

@@ -2,3 +2,4 @@ export * from "./Autocomplete";
 export * from "./AutocompleteInput";
 export * from "./AutocompleteTokenInput";
 export * from "./AutocompleteTypes";
+export * from "./AutocompleteSelect";

package/src/MenuContent/styles.tsx

@@ -3,5 +3,9 @@ import styled from "styled-components";
 export const StyledMenuContent = styled.ul`
   margin: 0;
   padding: 0;
-  outline: none;
+
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
 `;

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.stories.tsx

@@ -153,14 +153,22 @@ export const NestedMenuMultiLevelStory: Story = {
   render: (args) => {
     return (
       <MotionConfig reducedMotion="user">
-        <NestedMenu
-          initialMenuId="root"
-          menus={menus}
-          backArrowLabel="Go Back"
-          menuToggleElement={
-            <MenuToggleButton width="200px">Open Menu</MenuToggleButton>
-          }
-        />
+        <Box
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          height="100vh"
+          width="100vw"
+        >
+          <NestedMenu
+            initialMenuId="root"
+            menus={menus}
+            backArrowLabel="Go Back"
+            menuToggleElement={
+              <MenuToggleButton width="200px">Open Menu</MenuToggleButton>
+            }
+          />
+        </Box>
       </MotionConfig>
     );
   },

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
    */

package/src/NestedMenu/NestedMenuItem.tsx

@@ -13,14 +13,17 @@ const NestedMenuItem = ({
   const { setSelectedMenuId } = useNestedMenuContext();
   // This method of passing onClick is necessary because passing undefined for onClick
   // behaves differently from not passing anything at all.
-  const onClickProps = childMenuId
-    ? {
-        onClick: (e) => {
-          onClickProp?.(e);
-          setSelectedMenuId?.(childMenuId);
-        },
-      }
-    : {};
+  const onClickProps =
+    childMenuId || onClickProp
+      ? {
+          onClick: (e) => {
+            onClickProp?.(e);
+            if (childMenuId) {
+              setSelectedMenuId?.(childMenuId);
+            }
+          },
+        }
+      : {};
 
   return (
     <MenuItem {...onClickProps} {...rest}>