@sproutsocial/seeds-react-menu 1.1.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "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";
@@ -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/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/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}>