@sproutsocial/seeds-react-menu 0.2.2 → 0.3.0

package/package.json

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

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 = (

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

@@ -11,10 +11,10 @@ import { useMenuContext } from "../MenuContext";
  * <ActionMenu>
  *   <MenuHeader>Header</MenuHeader>
  *   <MenuContent>
- *     <MenuGroup>
+ *     <MenuGroup id="1">
  *       <MenuItem>Item 1</MenuItem>
  *     </MenuGroup>
- *     <MenuGroup>
+ *     <MenuGroup id="2">
  *       <MenuItem>Item 2</MenuItem>
  *     </MenuGroup>
  *   </MenuContent>
@@ -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/MenuContext.tsx

@@ -5,6 +5,8 @@ import React, {
   type RefObject,
 } from "react";
 import type {
+  UseComboboxReturnValue,
+  UseComboboxProps,
   UseSelectReturnValue,
   UseSelectProps,
   UseMultipleSelectionReturnValue,
@@ -12,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/MenuGroup.feature

@@ -6,20 +6,19 @@ Feature: Menu Group
     Background:
       Given an end user is using the component
 
-    Scenario: MenuGroup has isSingleSelect true
-      When the MenuGroup isSingleSelect is true
-      And MenuContext is set to multiple selection
-      Then the group behaves like a single select
+      Scenario Outline: MenuGroup can be single select
+        When the MenuGroup has isSingleSelect set to <value>
+        And MenuContext is set to <menu type>
+        Then <selection behavior>
 
-    Scenario: MenuGroup has isSingleSelect undefined
-      When the MenuGroup isSingleSelect is undefined
-      And MenuContext is set to multiple selection
-      Then the group behaves like a multi select
-
-    Scenario: MenuGroup has isSingleSelect false
-      When the MenuGroup isSingleSelect is false
-      And MenuContext is set to multiple selection
-      Then the group behaves like a multi select
+        Examples:
+          | value    | menu type | selection behavior                                   |
+          | true     | single    | the group behaves like a single select               |
+          | false    | single    | the group behaves like a single select               |
+          | undefined | single    | the group behaves like a single select               |
+          | true     | multiple  | the group behaves like a single select               |
+          | false    | multiple  | the group behaves like a multi select                |
+          | undefined | multiple  | the group behaves like a multi select                |
 
   Rule: API
     Background:
@@ -59,14 +58,14 @@ Feature: Menu Group
         Given a list of items is not empty
         And the items are a valid object shape
         When that list of items is provided to the items prop on a MenuGroup
-        And a valid component is provided to the customMenuItem prop 
+        And a valid component is provided to the customMenuItem prop
         Then the MenuGroup will render the items using the customMenuItem component
 
       Scenario: MenuGroup ignores the menuItemType without items prop
         When a MenuGroup has menuItemType set
         And is not provided with a valid items prop
         Then the menuItemType will be ignored
-      
+
       Scenario Outline: MenuGroup can set the type for all MenuItems
         When menuItemType is set to <menu item type>
         And MenuGroup is provided with a valid items prop
@@ -98,5 +97,6 @@ Feature: Menu Group
           | children       | ReactNode                 |
           | title          | string                    |
           | items          | TypeItem[]                |
+          | isSingleSelect | boolean                   |
           | menuItemType   | TypeMenuItemProps['type'] |
           | customMenuItem | tyepof MenuItem           |

package/src/MenuGroup/MenuGroup.tsx

@@ -10,10 +10,10 @@ import { StyledMenuGroup, StyledTitle, StyledMenuGroupUl } from "./styles";
  * @example
  * <ActionMenu>
  *   <MenuContent>
- *     <MenuGroup title="Group 1">
+ *     <MenuGroup title="Group 1" id="1">
  *       <MenuItem>Item 1</MenuItem>
  *     </MenuGroup>
- *     <MenuGroup title="Group 1">
+ *     <MenuGroup title="Group 2" id="2">
  *       <MenuItem>Item 2</MenuItem>
  *     </MenuGroup>
  *   </MenuContent>
@@ -27,6 +27,8 @@ export const MenuGroup = ({
   children,
   title,
   color,
+  isSingleSelect,
+  id,
   ...rest
 }: TypeMenuGroupProps) => {
   // Generate a unique ID for the title
@@ -35,6 +37,8 @@ export const MenuGroup = ({
   return (
     <StyledMenuGroup
       role="group"
+      id={id}
+      isSingleSelect={isSingleSelect}
       aria-labelledby={title ? titleId : undefined}
       // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment

package/src/MenuGroup/MenuGroupTypes.ts

@@ -23,6 +23,8 @@ export interface TypeMenuGroupStyledProps
 export interface TypeMenuGroupProps
   extends TypeMenuGroupStyledProps,
     Omit<React.ComponentPropsWithoutRef<"ul">, "color"> {
+  id: string;
+  isSingleSelect?: boolean;
   title?: string;
   children: ReactNode;
   titleAs?: string | React.ComponentType<any>;