@sproutsocial/seeds-react-menu 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -14,9 +14,7 @@
     "clean:modules": "rm -rf node_modules",
     "typecheck": "tsc --noEmit",
     "test": "jest",
-    "test:watch": "jest --watch --coverage=false",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
+    "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
     "@sproutsocial/seeds-react-box": "*",
@@ -32,7 +30,7 @@
     "motion": "^11.11.17"
   },
   "devDependencies": {
-    "eslint-config-seeds": "*",
+    "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",
     "@types/react": "^18.0.0",

package/src/ActionMenu/ActionMenu.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
 import {
   useSelect,
-  type UseSelectProps,
   type UseSelectState,
   type UseSelectStateChange,
 } from "downshift";
@@ -11,22 +10,9 @@ import {
   defaultUseSelectProps,
   useSelectStateReducer,
 } from "../reducers/useSelectStateReducer";
-import {
-  MenuRoot,
-  type TypeMenuRootProps,
-  type TypeMenuRootOwnProps,
-} from "../MenuRoot";
+import { MenuRoot } from "../MenuRoot";
 import { itemToString } from "../utils/itemToString";
-
-type TypeInvalidMenuProps =
-  | "initialSelectedItem"
-  | "defaultSelectedItem"
-  | "selectedItem";
-export interface TypeActionMenuProps
-  extends TypeMenuRootOwnProps,
-    Partial<Omit<UseSelectProps<TypeDefaultItemProps>, TypeInvalidMenuProps>> {
-  children: TypeMenuRootProps["children"];
-}
+import type { TypeActionMenuProps } from "./ActionMenuTypes";
 
 // Manually fire the onClick handler when Enter or Space is pressed
 const handleStateChange = (
@@ -49,7 +35,7 @@ const handleStateChange = (
   if (!selectedItem) return;
 
   // if selectedItem is disabled, do nothing
-  if (selectedItem.element?.props?.disabled) {
+  if (selectedItem.disabled) {
     return;
   }
 
@@ -58,7 +44,7 @@ const handleStateChange = (
     changes.type === useSelect.stateChangeTypes.ToggleButtonKeyDownEnter;
 
   // selectedItem props
-  const selectedItemProps = selectedItem.element?.props;
+  const selectedItemProps = selectedItem.menuItemProps;
 
   if (selectedItemProps?.onClick) {
     // Create a synthetic event to pass into the onClick
@@ -111,7 +97,6 @@ export const ActionMenu = ({
     onStateChange: (changes) => handleStateChange(changes, currentSelectedItem),
     stateReducer: (state, actionAndChanges) => {
       let newState: Partial<UseSelectState<TypeDefaultItemProps>>;
-      // eslint-disable-next-line prefer-const, react-hooks/rules-of-hooks
       newState = useSelectStateReducer(state, actionAndChanges);
       return externalStateReducer
         ? externalStateReducer(state, {

package/src/ActionMenu/ActionMenuTypes.ts

@@ -0,0 +1,12 @@
+import { type TypeMenuRootProps, type TypeMenuRootOwnProps } from "../MenuRoot";
+import type { TypeDownshiftSelectProps } from "../MenuContext";
+
+type TypeInvalidMenuProps =
+  | "initialSelectedItem"
+  | "defaultSelectedItem"
+  | "selectedItem";
+export interface TypeActionMenuProps
+  extends TypeMenuRootOwnProps,
+    Omit<TypeDownshiftSelectProps, TypeInvalidMenuProps> {
+  children: TypeMenuRootProps["children"];
+}

package/src/ActionMenu/index.ts

@@ -1 +1,2 @@
 export * from "./ActionMenu";
+export * from "./ActionMenuTypes";

package/src/{ComboBox/ComboBox.feature → Autocomplete/Autocomplete.feature}

@@ -1,4 +1,4 @@
-Feature: ComboBox
+Feature: Autocomplete
 
     A component that allows users to search, select, and manage items with autocomplete functionality.
 
@@ -8,31 +8,31 @@ Feature: ComboBox
             Given an end user is using the component
 
         Scenario: User can autocomplete text inputs
-            Given the ComboBox Input is focused
+            Given the Autocomplete Input is focused
             When text is typed into the input
             Then a list of matching items is displayed
             And an item can be selected from the list
 
         Scenario: User can add a new value
-            Given the Combobox Input has a value
+            Given the Autocomplete Input has a value
             When new values are allowed
             And the value has no match
             Then a new value can be created
 
         Scenario: User gets a warning on error
-            Given the Combobox Input has a value
+            Given the Autocomplete Input has a value
             When the value is invalid
             Then a warning message appears
 
         Scenario: User can select an item from the list
-            Given the ComboBox Input has text
+            Given the Autocomplete Input has text
             When an item is selected
             Then the item is marked as selected
             And the input reflects the selected item
 
         Scenario: Screen reader announces combobox
             Given a screen reader is being used
-            When the Combobox input is focused
+            When the Autocomplete input is focused
             Then the screen reader announces it as a "combobox"
 
         Scenario: Component handles input change
@@ -40,7 +40,7 @@ Feature: ComboBox
             Then the onChange callback fires
 
         Scenario Outline: Custom open/close behavior
-            Given the ComboBox is rendered with custom behavior
+            Given the Autocomplete is rendered with custom behavior
             When the `<action>` is performed
             Then the `<handler>` is executed
 
@@ -51,7 +51,7 @@ Feature: ComboBox
                 | input blurred | onBlur   |
 
         Scenario Outline: Autocomplete suggestions are displayed
-            Given the ComboBox is rendered with items
+            Given the Autocomplete is rendered with items
             When <text> is typed into the input
             Then matching <suggestion> items are displayed
 
@@ -65,21 +65,21 @@ Feature: ComboBox
         Background:
             Given an engineer is developing using the component
 
-        Scenario: ComboBox extends Menu
-            When Menu features are used in ComboBox
-            Then the ComboBox responds as a Menu would
+        Scenario: Autocomplete extends Menu
+            When Menu features are used in Autocomplete
+            Then the Autocomplete responds as a Menu would
 
-        Scenario: ComboBox accepts selected item
-            When a selected item is passed to the ComboBox
+        Scenario: Autocomplete accepts selected item
+            When a selected item is passed to the Autocomplete
             Then the input reflects the selected item
 
-        Scenario: ComboBox hasWarning
+        Scenario: Autocomplete hasWarning
             When the input's validation has an error
             Then 'hasWarning' becomes true
 
-        Scenario Outline: ComboBox checks its types
+        Scenario Outline: Autocomplete checks its types
             When <propName> is passed a value
-            Then ComboBox expects it to be of type <propType>
+            Then Autocomplete expects it to be of type <propType>
 
             Examples: Prop Types
                 | propName     | propType         |

package/src/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { useCombobox, type UseComboboxState } from "downshift";
+import { useItemsFromChildren } from "../hooks/useItemsFromChildren";
+import {
+  defaultUseComboboxProps,
+  useComboboxStateReducer,
+} from "../reducers/useComboboxStateReducer";
+import { itemToString } from "../utils/itemToString";
+import { MenuRoot } from "../MenuRoot";
+import type { TypeAutocompleteProps } from "./AutocompleteTypes";
+import type { TypeDefaultItemProps } from "../types";
+
+/**
+ * @link https://seeds.sproutsocial.com/components/multiselect-menu/
+ *
+ * @description A Autocomplete allows multiple {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MenuItem | MenuItems} to be selected from a list or groups of lists.
+ *
+ * @see {@link https://seeds.sproutsocial.com/components/menu-group/ | MenuGroup}
+ */
+
+export const Autocomplete = ({
+  children,
+  stateReducer: externalStateReducer,
+  ...useComboboxProps
+}: TypeAutocompleteProps) => {
+  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+
+  const { isOpen, ...useComboboxReturnProps } = useCombobox({
+    ...defaultUseComboboxProps,
+    // onInputValueChange({ inputValue }) {
+    //   setItems(books.filter(getBooksFilter(inputValue)));
+    // },
+    items: allMenuItems,
+    itemToString,
+    selectedItem: null,
+    defaultHighlightedIndex: 0,
+    stateReducer: (state, actionAndChanges) => {
+      let newState: Partial<UseComboboxState<TypeDefaultItemProps>>;
+      newState = useComboboxStateReducer(state, actionAndChanges);
+      return externalStateReducer
+        ? externalStateReducer(state, {
+            ...actionAndChanges,
+            changes: newState,
+          })
+        : newState;
+    },
+    ...useCombobox,
+  });
+
+  return (
+    <MenuRoot
+      {...{
+        isListbox: true,
+        items: allMenuItems,
+        itemsMap: menuItemsMap,
+        itemToString,
+        isOpen,
+        ...useComboboxProps,
+        ...useComboboxReturnProps,
+      }}
+    >
+      {children}
+    </MenuRoot>
+  );
+};

package/src/Autocomplete/AutocompleteTypes.ts

@@ -0,0 +1,8 @@
+import type { TypeMenuRootProps, TypeMenuRootOwnProps } from "../MenuRoot";
+import type { TypeDownshiftComboboxProps } from "../MenuContext";
+
+export interface TypeAutocompleteProps
+  extends TypeMenuRootOwnProps,
+    TypeDownshiftComboboxProps {
+  children: TypeMenuRootProps["children"];
+}

package/src/Autocomplete/__tests__/Autocomplete.test.tsx

@@ -0,0 +1,113 @@
+// import React from "react";
+// import {
+//   render,
+//   screen,
+//   fireEvent,
+//   waitFor,
+// } from "@sproutsocial/seeds-react-testing-library";
+// import { Autocomplete } from "../Autocomplete";
+
+xdescribe("Autocomplete Component", () => {
+  it("should render the Autocomplete component", () => {
+    // render(<Autocomplete />);
+    // const autocompleteElement = screen.getByRole("combobox");
+    // expect(autocompleteElement).toBeInTheDocument();
+  });
+
+  it("should display suggestions when typing", async () => {
+    // render(<Autocomplete />);
+    // const inputElement = screen.getByRole("combobox");
+    // fireEvent.change(inputElement, { target: { value: "test" } });
+    // await waitFor(() => {
+    //   const suggestions = screen.getAllByRole("option");
+    //   expect(suggestions.length).toBeGreaterThan(0);
+    // });
+  });
+
+  it("should select a suggestion when clicked", async () => {
+    // render(<Autocomplete />);
+    // const inputElement = screen.getByRole("combobox");
+    // fireEvent.change(inputElement, { target: { value: "test" } });
+    // await waitFor(() => {
+    //   const suggestion = screen.getByText("test suggestion");
+    //   fireEvent.click(suggestion);
+    //   expect(inputElement.value).toBe("test suggestion");
+    // });
+  });
+
+  it("should allow adding a new value when no match is found", async () => {
+    // render(<Autocomplete allowNewValues />);
+    // const inputElement = screen.getByRole("combobox");
+    // fireEvent.change(inputElement, { target: { value: "new value" } });
+    // await waitFor(() => {
+    //   const newValueOption = screen.getByText('Add "new value"');
+    //   fireEvent.click(newValueOption);
+    //   expect(inputElement.value).toBe("new value");
+    // });
+  });
+
+  it("should display a warning message when the value is invalid", async () => {
+    // render(<Autocomplete />);
+    // const inputElement = screen.getByRole("combobox");
+    // fireEvent.change(inputElement, { target: { value: "invalid value" } });
+    // await waitFor(() => {
+    //   const warningMessage = screen.getByText("Invalid value");
+    //   expect(warningMessage).toBeInTheDocument();
+    // });
+  });
+
+  it("should mark an item as selected and reflect it in the input", async () => {
+    // render(<Autocomplete />);
+    // const inputElement = screen.getByRole("combobox");
+    // fireEvent.change(inputElement, { target: { value: "test" } });
+    // await waitFor(() => {
+    //   const suggestion = screen.getByText("test suggestion");
+    //   fireEvent.click(suggestion);
+    //   expect(inputElement.value).toBe("test suggestion");
+    //   expect(suggestion).toHaveAttribute("aria-selected", "true");
+    // });
+  });
+
+  it('should announce the input as a "combobox" for screen readers', () => {
+    // render(<Autocomplete />);
+    // const inputElement = screen.getByRole("combobox");
+    // expect(inputElement).toHaveAttribute("aria-haspopup", "listbox");
+  });
+
+  it("should fire the onChange callback when the input value changes", () => {
+    // const handleChange = jest.fn();
+    // render(<Autocomplete onChange={handleChange} />);
+    // const inputElement = screen.getByRole("combobox");
+    // fireEvent.change(inputElement, { target: { value: "test" } });
+    // expect(handleChange).toHaveBeenCalledWith("test");
+  });
+
+  it.each`
+    action             | handler
+    ${"item selected"} | ${"onSelect"}
+    ${"input focused"} | ${"onFocus"}
+    ${"input blurred"} | ${"onBlur"}
+  `(
+    "should execute $handler when $action is performed",
+    async ({ action, handler }) => {
+      // const handlerMock = jest.fn();
+      // const props = { [handler]: handlerMock };
+      // render(<Autocomplete {...props} />);
+      // const inputElement = screen.getByRole("combobox");
+      // if (action === "item selected") {
+      //   fireEvent.change(inputElement, { target: { value: "test" } });
+      //   await waitFor(() => {
+      //     const suggestion = screen.getByText("test suggestion");
+      //     fireEvent.click(suggestion);
+      //     expect(handlerMock).toHaveBeenCalled();
+      //   });
+      // } else if (action === "input focused") {
+      //   fireEvent.focus(inputElement);
+      //   expect(handlerMock).toHaveBeenCalled();
+      // } else if (action === "input blurred") {
+      //   fireEvent.blur(inputElement);
+      //   expect(handlerMock).toHaveBeenCalled();
+      // }
+    }
+  );
+});

package/src/Autocomplete/__tests__/Autocomplete.typetest.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import {
+  MultiSelectMenu,
+  MenuContent,
+  MenuHeader,
+  MenuFooter,
+} from "../../index";
+
+export const MultiSelectMenuTypeTest = () => (
+  <>
+    {/* Valid MultiSelectMenu with minimal required props */}
+    <MultiSelectMenu menuToggleElement={<>test</>}>Test</MultiSelectMenu>
+    {/* Valid MultiSelectMenu allows MenuContent by itself as a child */}
+    <MultiSelectMenu menuToggleElement={<>test</>}>
+      <MenuContent>Test</MenuContent>
+    </MultiSelectMenu>
+    {/* Valid MultiSelectMenu allows multiple children without fragment */}
+    <MultiSelectMenu menuToggleElement={<>test</>}>
+      <MenuHeader>Test</MenuHeader>
+      <MenuContent>Test</MenuContent>
+      <MenuFooter>Test</MenuFooter>
+    </MultiSelectMenu>
+    {/* Valid MultiSelectMenu accepts Downshift props and functions for useSelect */}
+    <MultiSelectMenu
+      menuToggleElement={<>test</>}
+      onSelectedItemChange={() => {}}
+      selectedItem={null}
+      stateReducer={(c) => c}
+      onStateChange={() => {}}
+      getA11yStatusMessage={() => ""}
+      isOpen
+    >
+      Test
+    </MultiSelectMenu>
+    {/* Valid MultiSelectMenu accepts Downshift props and functions for useMultipleSelection */}
+    <MultiSelectMenu
+      menuToggleElement={<>test</>}
+      onSelectedItemsChange={() => {}}
+      selectedItems={[]}
+      multiSelectStateReducer={(c) => c}
+      onMultiSelectStateChange={() => {}}
+      getA11yMultiStatusMessage={() => ""}
+    >
+      Test
+    </MultiSelectMenu>
+
+    {/* @ts-expect-error - menuToggleElement is a required prop */}
+    <MultiSelectMenu>Test</MultiSelectMenu>
+    <MultiSelectMenu
+      /* @ts-expect-error - menuToggleElement must be a valid react element */
+      menuToggleElement="test"
+    >
+      Test
+    </MultiSelectMenu>
+    {/* @ts-expect-error - when no children provided */}
+    <MultiSelectMenu menuToggleElement="test" />
+
+    <MultiSelectMenu
+      menuToggleElement={<>test</>}
+      /* @ts-expect-error - isOpen can't be a string */
+      isOpen="false"
+      /* @ts-expect-error - onSelectedItemChange can't be a string */
+      onSelectedItemChange="test"
+      /* @ts-expect-error - selectedItem can't be a string */
+      selectedItem="test"
+      /* @ts-expect-error - stateReducer must have a return value */
+      stateReducer={() => {}}
+      /* @ts-expect-error - onMultiSelectStateChange can't be a string */
+      onMultiSelectStateChange="test"
+      /* @ts-expect-error - selectedItems can't be a string */
+      selectedItems="test"
+      /* @ts-expect-error - multiSelectStateReducer must have a return value */
+      multiSelectStateReducer="test"
+    >
+      Test
+    </MultiSelectMenu>
+  </>
+);

package/src/Autocomplete/index.ts

@@ -0,0 +1,2 @@
+export * from "./Autocomplete";
+export * from "./AutocompleteTypes";

package/src/MenuContent/MenuContent.tsx

@@ -38,7 +38,7 @@ const MenuContent = ({
       id={id}
       tabIndex={0}
       // apply onKeyDown logic for downshift keyboard accessibility support
-      onKeyDown={getToggleButtonProps?.().onKeyDown}
+      onKeyDown={getToggleButtonProps?.()["onKeyDown"] || undefined}
       // apply active descendent updates to container for proper accessibility
       aria-activedescendant={getToggleButtonProps?.()["aria-activedescendant"]}
       {...getMenuProps?.(

package/src/MenuContent/MenuContentTypes.ts

@@ -1,5 +1,6 @@
+import React from "react";
 import { type HTMLMotionProps } from "motion/react";
-import type { ReactNode } from "react";
+import type { ReactNode, RefObject } from "react";
 
 export interface TypeMenuContentProps extends HTMLMotionProps<"ul"> {
   children: ReactNode;

package/src/MenuContext.tsx

@@ -1,5 +1,12 @@
-import React, { createContext, useMemo, useContext } from "react";
+import React, {
+  createContext,
+  useMemo,
+  useContext,
+  type RefObject,
+} from "react";
 import type {
+  UseComboboxReturnValue,
+  UseComboboxProps,
   UseSelectReturnValue,
   UseSelectProps,
   UseMultipleSelectionReturnValue,
@@ -7,26 +14,80 @@ import type {
 } from "downshift";
 import type { TypeDefaultItemProps, TypeNotEmptyChildren } from "./types";
 
+export interface TypeDownshiftComboboxProps
+  extends Partial<UseComboboxProps<TypeDefaultItemProps>> {}
+
+export interface TypeDownshiftSelectProps
+  extends Partial<UseSelectProps<TypeDefaultItemProps>> {}
+
 export interface TypeDownshiftMultiSelectProps
-  extends Partial<UseSelectProps<TypeDefaultItemProps>>,
-    Partial<
-      Omit<
-        UseMultipleSelectionProps<TypeDefaultItemProps>,
-        "stateReducer" | "onStateChange" | "getA11yStatusMessage"
-      >
-    > {
+  extends Partial<
+    Omit<
+      UseMultipleSelectionProps<TypeDefaultItemProps>,
+      "stateReducer" | "onStateChange" | "getA11yStatusMessage"
+    >
+  > {
   // Multi Select Props with conflicting useSelect prop names
   getA11yMultiStatusMessage?: UseMultipleSelectionProps<TypeDefaultItemProps>["getA11yStatusMessage"];
   onMultiSelectStateChange?: UseMultipleSelectionProps<TypeDefaultItemProps>["onStateChange"];
   multiSelectStateReducer?: UseMultipleSelectionProps<TypeDefaultItemProps>["stateReducer"];
 }
 
+export interface TypeDownshiftComboboxReturnValue
+  extends Partial<UseComboboxReturnValue<TypeDefaultItemProps>> {}
+
+export interface TypeDownshiftSelectReturnValue
+  extends Partial<UseSelectReturnValue<TypeDefaultItemProps>> {}
+
+export interface TypeDownshiftMultiSelectReturnValue
+  extends Partial<UseMultipleSelectionReturnValue<TypeDefaultItemProps>> {}
+
+type TypeDonwshiftSharedReturnValue =
+  | "getLabelProps"
+  | "getToggleButtonProps"
+  | "getMenuProps";
+type TypeDonwshiftSharedProps =
+  | "onHighlightedIndexChange"
+  | "onIsOpenChange"
+  | "onSelectedItemChange"
+  | "onStateChange"
+  | "stateReducer";
 export interface TypeMenuContextProps
-  extends Partial<UseSelectReturnValue<TypeDefaultItemProps>>,
-    Partial<UseMultipleSelectionReturnValue<TypeDefaultItemProps>>,
+  extends Omit<
+      TypeDownshiftComboboxReturnValue,
+      TypeDonwshiftSharedReturnValue
+    >,
+    Omit<TypeDownshiftComboboxProps, TypeDonwshiftSharedProps>,
+    Omit<TypeDownshiftSelectReturnValue, TypeDonwshiftSharedReturnValue>,
+    Omit<TypeDownshiftSelectProps, TypeDonwshiftSharedProps>,
+    TypeDownshiftMultiSelectReturnValue,
     TypeDownshiftMultiSelectProps {
   items: TypeDefaultItemProps[];
   isListbox?: boolean;
+  onHighlightedIndexChange?:
+    | TypeDownshiftComboboxProps["onHighlightedIndexChange"]
+    | TypeDownshiftSelectProps["onHighlightedIndexChange"];
+  onIsOpenChange?:
+    | TypeDownshiftComboboxProps["onIsOpenChange"]
+    | TypeDownshiftSelectProps["onIsOpenChange"];
+  onSelectedItemChange?:
+    | TypeDownshiftComboboxProps["onSelectedItemChange"]
+    | TypeDownshiftSelectProps["onSelectedItemChange"];
+  onStateChange?:
+    | TypeDownshiftComboboxProps["onStateChange"]
+    | TypeDownshiftSelectProps["onStateChange"];
+  stateReducer?:
+    | TypeDownshiftComboboxProps["stateReducer"]
+    | TypeDownshiftSelectProps["stateReducer"];
+  getLabelProps?:
+    | TypeDownshiftComboboxReturnValue["getLabelProps"]
+    | TypeDownshiftSelectReturnValue["getLabelProps"];
+  getToggleButtonProps?:
+    | TypeDownshiftComboboxReturnValue["getToggleButtonProps"]
+    | TypeDownshiftSelectReturnValue["getToggleButtonProps"];
+  getMenuProps?:
+    | TypeDownshiftComboboxReturnValue["getMenuProps"]
+    | TypeDownshiftSelectReturnValue["getMenuProps"];
 }
 
 export interface TypeMenuContext extends TypeMenuContextProps {

package/src/MenuGroup/MenuGroupTypes.ts

@@ -25,6 +25,5 @@ export interface TypeMenuGroupProps
     Omit<React.ComponentPropsWithoutRef<"ul">, "color"> {
   title?: string;
   children: ReactNode;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   titleAs?: string | React.ComponentType<any>;
 }

package/src/MenuGroup/__tests__/MenuGroup.test.tsx

@@ -44,7 +44,6 @@ describe("MenuGroup", () => {
       const menuGroup = screen.getByRole("group", { name: menuTitle });
       expect(menuGroup).toBeInTheDocument();
       expect(
-        // eslint-disable-next-line testing-library/prefer-presence-queries
         screen.queryByRole("heading", { name: menuTitle })
       ).toBeInTheDocument();
     });

package/src/MenuHeader/__tests__/MenuHeader.typetest.tsx

@@ -6,7 +6,6 @@ export const MenuHeaderTypeTest = () => (
       title="Menu Header"
       leftAction={<div>left action</div>}
       rightAction={<div>right action</div>}
-      // eslint-disable-next-line react/no-children-prop
       children={<div>children</div>}
     />
     {/* left and right action accept strings */}

package/src/MenuItem/MenuItem.tsx

@@ -17,12 +17,9 @@ export const MenuItem = ({
   children,
   onClick,
   onKeyDown,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   disabled = false,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ref,
   href,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   color,
   ...props
 }: TypeMenuItemProps) => {
@@ -53,7 +50,6 @@ export const MenuItem = ({
         // use anchor tag if href is provided and button for menuitem
         as={isListbox ? undefined : href ? "a" : "button"}
         href={href}
-        // eslint-disable-next-line react/no-children-prop
         children={children}
         {...optionProps}
         {...props}

package/src/MenuItem/__tests__/MenuItem.test.tsx

@@ -4,6 +4,7 @@ import {
   screen,
   render,
   waitFor,
+  act,
 } from "@sproutsocial/seeds-react-testing-library";
 import {
   PointerEventsCheckLevel,
@@ -394,6 +395,8 @@ describe("MenuItem when isListbox", () => {
   });
 
   describe("API", () => {
+    // This test has many tests inside it due to the `each` usage, so extend the timeout.
+    jest.setTimeout(20 * 1000);
     test.each([INPUT_TYPES.CHECKBOX, INPUT_TYPES.RADIO, INPUT_TYPES.SWITCH])(
       "supports %s input types",
       (inputType) => {
@@ -491,7 +494,7 @@ describe("MenuItem when isListbox", () => {
         const menuItem = screen.getByRole("option", { selected: true });
         testByType[inputType].isSelected();
 
-        await user.click(menuItem);
+        await act(() => user.click(menuItem));
 
         expect(
           await screen.findByRole("option", {