@sproutsocial/seeds-react-menu 1.10.8 → 1.11.0

package/dist/index.d.ts

@@ -5,8 +5,8 @@ import * as styled_components from 'styled-components';
 import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
 import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 export { TypeBoxProps as TypeMenuFooterProps } from '@sproutsocial/seeds-react-box';
-import * as React$1 from 'react';
-import React__default from 'react';
+import * as react from 'react';
+import react__default from 'react';
 import { TypePopoutProps, EnumPlacements } from '@sproutsocial/seeds-react-popout';
 import { TypeTokenInputProps, TypeTokenSpec } from '@sproutsocial/seeds-react-token-input';
 import * as _sproutsocial_seeds_react_text from '@sproutsocial/seeds-react-text';
@@ -59,7 +59,7 @@ declare const MenuGroup: {
 };
 
 declare const StyledMenuGroup: styled_components.StyledComponent<"li", styled_components.DefaultTheme, TypeMenuGroupBaseProps, never>;
-declare const StyledTitle: styled_components.StyledComponent<React$1.FC<_sproutsocial_seeds_react_text.TypeTextProps>, styled_components.DefaultTheme, {}, never>;
+declare const StyledTitle: styled_components.StyledComponent<react.FC<_sproutsocial_seeds_react_text.TypeTextProps>, styled_components.DefaultTheme, {}, never>;
 declare const StyledMenuGroupUl: styled_components.StyledComponent<"ul", styled_components.DefaultTheme, {}, never>;
 
 interface TypeDownshiftComboboxProps extends Partial<UseComboboxProps<TypeInternalItemProps>> {
@@ -89,10 +89,10 @@ interface TypeMenuContextBaseProps {
     isListbox?: boolean;
     hiddenItemsMap?: Record<string, boolean>;
     hiddenItemsCount?: number;
-    setHiddenItemsMap?: React__default.Dispatch<React__default.SetStateAction<Record<string, boolean>>>;
+    setHiddenItemsMap?: react__default.Dispatch<react__default.SetStateAction<Record<string, boolean>>>;
     subMenuId?: string;
     setSubMenuId?: (id: string) => void;
-    contentRef?: React__default.RefObject<HTMLUListElement>;
+    contentRef?: react__default.RefObject<HTMLUListElement>;
 }
 interface TypeAllDownshiftProps extends Omit<TypeDownshiftComboboxReturnValue, TypeDonwshiftSharedReturnValue>, Omit<TypeDownshiftComboboxProps, TypeDonwshiftSharedProps>, Omit<TypeDownshiftSelectReturnValue, TypeDonwshiftSharedReturnValue>, Omit<TypeDownshiftSelectProps, TypeDonwshiftSharedProps>, TypeDownshiftMultiSelectReturnValue, TypeDownshiftMultiSelectProps {
     onHighlightedIndexChange?: TypeDownshiftComboboxProps["onHighlightedIndexChange"] | TypeDownshiftSelectProps["onHighlightedIndexChange"];
@@ -129,7 +129,7 @@ interface TypeMenuProviderProps {
     menuContext: TypeMenuContext;
 }
 interface TypeMenuToggleContext extends TypeMenuContext {
-    ref?: React__default.RefObject<any> | ((arg0: React__default.ElementRef<any> | HTMLElement) => void);
+    ref?: react__default.RefObject<any> | ((arg0: react__default.ElementRef<any> | HTMLElement) => void);
     toggle?: () => void;
     show?: () => void;
     hide?: () => void;
@@ -156,7 +156,7 @@ declare const useMenu: ({ items, isListbox, isOpen, itemsMap: itemsMapFromProps,
  * MenuToggleContext factory, sets the type and the initial object
  * @description Context for the Menu Toggle
  */
-declare const MenuToggleContext: React__default.Context<TypeMenuToggleContext>;
+declare const MenuToggleContext: react__default.Context<TypeMenuToggleContext>;
 /**
  * MenuToggleProvider Component sets the context values into the provider
  * @description Context Provider for the Menu Toggle
@@ -170,7 +170,7 @@ declare const useMenuToggleContext: () => TypeMenuToggleContext;
  * MenuContentContext factory, sets the type and the initial object
  * @description Context for the Menu Content
  */
-declare const MenuContentContext: React__default.Context<TypeMenuContext>;
+declare const MenuContentContext: react__default.Context<TypeMenuContext>;
 /**
  * MenuContentProvider Component sets the context values into the provider
  * @description Context Provider for the Menu Content
@@ -184,7 +184,7 @@ declare const useMenuContentContext: () => TypeMenuContext;
 interface TypeMenuRootOwnProps {
     /** The element that is or contains an element that will toggle the menu when clicked.
      *  May contain labels, buttons, inputs or other content as needed. */
-    menuToggleElement: React__default.ReactElement<any>;
+    menuToggleElement: react__default.ReactElement<any>;
     /** Props to pass through to the underlying Popout.
      *  Any Popout prop is valid except those explicitly omitted. */
     popoutProps?: Partial<Omit<TypePopoutProps, "isOpen" | "setIsOpen" | "content" | "children">>;
@@ -320,10 +320,10 @@ declare const MenuItemActionLeft: styled_components.StyledComponent<"div", style
 declare const MenuItemActionRight: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
 declare const MenuItemText: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
 
-interface TypeMenuHeaderProps extends Omit<React$1.ComponentPropsWithoutRef<"div">, "color">, TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps, TypePositionSystemProps {
+interface TypeMenuHeaderProps extends Omit<react.ComponentPropsWithoutRef<"div">, "color">, TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps, TypePositionSystemProps {
     title?: string;
-    leftAction?: React$1.ReactNode;
-    rightAction?: React$1.ReactNode;
+    leftAction?: react.ReactNode;
+    rightAction?: react.ReactNode;
 }
 
 /**
@@ -367,7 +367,7 @@ type TypeMenuContentProps<I extends TypeMenuItemProps = TypeMenuItemProps> = Typ
  * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menugroup MenuGroup}
  */
 declare const MenuContent: {
-    <I extends TypeMenuItemProps = TypeMenuItemProps>({ id, children: childrenProp, menuItems, MenuItemComponent, onKeyDown, innerRef, emptyStateElement, ...rest }: TypeMenuContentProps<I>): string | number | boolean | Iterable<React$1.ReactNode> | react_jsx_runtime.JSX.Element | null;
+    <I extends TypeMenuItemProps = TypeMenuItemProps>({ id, children: childrenProp, menuItems, MenuItemComponent, onKeyDown, innerRef, emptyStateElement, ...rest }: TypeMenuContentProps<I>): string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null;
     __MENU_PRIMITIVE_TYPE: string;
 };
 
@@ -386,7 +386,7 @@ declare const DefaultMenuEmptyState: ({ children, ...props }: TypeDefaultMenuEmp
 declare const MenuFooter: ({ children, ...rest }: TypeBoxProps) => react_jsx_runtime.JSX.Element;
 
 interface TypeMenuLabelProps extends Omit<TypeLabelProps, "htmlFor"> {
-    children: React__default.ReactNode;
+    children: react__default.ReactNode;
     /** Whether making a selection in the associated menu is required. */
     required?: boolean;
     /** ID of the associated form element. This prop is never valid to pass into MenuLabel
@@ -628,7 +628,7 @@ interface TypeNestedMenuProviderProps extends TypeNestedMenuContext {
 /**
  * NestedMenuContext factory, sets the type and the initial object
  */
-declare const NestedMenuContext: React__default.Context<TypeNestedMenuContext>;
+declare const NestedMenuContext: react__default.Context<TypeNestedMenuContext>;
 /**
  * Provider Component sets the context values in the provider
  */
@@ -640,11 +640,11 @@ declare const useNestedMenuContext: () => TypeNestedMenuContext;
 
 interface TypeMapMenuItemsProps<I extends TypeMenuItemProps = TypeMenuItemProps> {
     menuItems: I[];
-    MenuItemComponent?: React__default.ComponentType<I>;
+    MenuItemComponent?: react__default.ComponentType<I>;
 }
-type TypeItemElement<I extends TypeMenuItemProps = TypeMenuItemProps> = React__default.ReactElement<TypeMenuItemProps | TypeSubmenuItemProps<I, TypeSubmenuValidMenuComponentProps<I>>>;
-type TypeMenuGroupElement<I extends TypeMenuItemProps = TypeMenuItemProps> = React__default.ReactElement<TypeMenuGroupProps<I>>;
-type TypeMenuContentElement<I extends TypeMenuItemProps = TypeMenuItemProps> = React__default.ReactElement<TypeMenuContentProps<I>>;
+type TypeItemElement<I extends TypeMenuItemProps = TypeMenuItemProps> = react__default.ReactElement<TypeMenuItemProps | TypeSubmenuItemProps<I, TypeSubmenuValidMenuComponentProps<I>>>;
+type TypeMenuGroupElement<I extends TypeMenuItemProps = TypeMenuItemProps> = react__default.ReactElement<TypeMenuGroupProps<I>>;
+type TypeMenuContentElement<I extends TypeMenuItemProps = TypeMenuItemProps> = react__default.ReactElement<TypeMenuContentProps<I>>;
 interface TypeMenuChildren {
     type: "item" | "group" | "content";
     element: TypeItemElement | TypeMenuGroupElement | TypeMenuContentElement;
@@ -653,18 +653,18 @@ declare const mapMenuItems: <I extends TypeMenuItemProps = TypeMenuItemProps>({
 type TypeUseMenuChildrenProps<I extends TypeMenuItemProps = TypeMenuItemProps> = {
     children?: TypeMenuRootProps["children"];
     menuItems?: I[];
-    MenuItemComponent?: React__default.ComponentType<I>;
+    MenuItemComponent?: react__default.ComponentType<I>;
 };
 declare const getChildrenFromMenuItems: <I extends TypeMenuItemProps = TypeMenuItemProps>({ menuItems, MenuItemComponent, }: {
     menuItems: I[];
-    MenuItemComponent?: React__default.ComponentType<I>;
+    MenuItemComponent?: react__default.ComponentType<I>;
 }) => react_jsx_runtime.JSX.Element;
 declare const useMenuChildren: <I extends TypeMenuItemProps = TypeMenuItemProps>({ children: childrenProp, menuItems, MenuItemComponent, }: TypeUseMenuChildrenProps<I>) => {
     allMenuItems: TypeInternalItemProps<TypeMenuItemProps>[];
     menuItemsMap: {
         [key: string]: TypeInternalItemProps<TypeMenuItemProps>;
     };
-    children: string | number | true | React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | React__default.ReactPortal;
+    children: string | number | true | react__default.ReactElement<any, string | react__default.JSXElementConstructor<any>> | Iterable<react__default.ReactNode> | react__default.ReactPortal;
 };
 
 declare const useSelectStateReducer: Required<UseSelectProps<TypeInternalItemProps>>["stateReducer"];

package/dist/index.js

@@ -475,22 +475,26 @@ var MenuItem = ({
   });
   const item = itemsMap[id] || { index: 0, id };
   const highlighted = highlightedIndex === item?.index;
+  const downshiftItemProps = getItemProps?.({
+    ...isListbox ? {} : { role: "menuitem" },
+    item,
+    index: item.index,
+    // The disabled prop no longer supported in downshift. Use isItemDisabled instead.
+    // disabled,
+    onClick,
+    onKeyDown,
+    ref: innerRef
+  }) ?? {};
+  if (!isListbox && "aria-selected" in downshiftItemProps) {
+    delete downshiftItemProps["aria-selected"];
+  }
   return hiddenItemsMap[item.id] ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuItemContainer, { role: "none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     StyledMenuItem,
     {
       id,
       $highlighted: highlighted,
       $active: active,
-      ...getItemProps?.({
-        ...isListbox ? {} : { role: "menuitem" },
-        item,
-        index: item.index,
-        // The disabled prop no longer supported in downshift. Use isItemDisabled instead.
-        // disabled,
-        onClick,
-        onKeyDown,
-        ref: innerRef
-      }),
+      ...downshiftItemProps,
       as: isListbox ? void 0 : href ? "a" : "button",
       type: href ? void 0 : "button",
       href,
@@ -919,7 +923,18 @@ var StyledMenuGroupUl = import_styled_components7.default.ul`
 `;
 
 // src/MenuGroup/MenuGroup.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime9 = (
+  // role="none" on the outer <li>: this wrapper is purely visual (it exists
+  // for the border-bottom divider between groups in the parent menu <ul>).
+  // The ARIA group semantics live on the inner <ul> below — axe rejects
+  // role="group" on <li>, and a native <ul> here would trigger the `list`
+  // rule because its children are <li role="none"> menuitem wrappers.
+  //
+  // TODO(DS-4273): drop the list-based DOM entirely (MenuContent/MenuGroup
+  // as <div>, no <ul>/<li>, no role="none" wrappers). This is the followup
+  // to DS-4271's minimal ARIA patch.
+  require("react/jsx-runtime")
+);
 var MenuGroup = ({
   titleAs = "h3",
   children: childrenProp,
@@ -939,15 +954,21 @@ var MenuGroup = ({
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     StyledMenuGroup,
     {
-      role: "group",
+      role: "none",
       id,
       isSingleSelect,
-      "aria-labelledby": title ? titleId : void 0,
       color: color5,
       ...rest,
       children: [
         title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledMenuGroupUl, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          StyledMenuGroupUl,
+          {
+            role: "group",
+            "aria-labelledby": title ? titleId : void 0,
+            children
+          }
+        )
       ]
     }
   );