joy-ui: add GroupListContext

packages/mui-joy/src/List/GroupListContext.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const GroupListContext = React.createContext<undefined | 'menu' | 'select'>(undefined);
+
+export default GroupListContext;

packages/mui-joy/src/List/List.tsx

@@ -10,6 +10,7 @@ import { ListProps, ListOwnerState, ListTypeMap } from './ListProps';
 import { getListUtilityClass } from './listClasses';
 import NestedListContext from './NestedListContext';
 import ComponentListContext from './ComponentListContext';
+import GroupListContext from './GroupListContext';
 import ListProvider from './ListProvider';
 import RadioGroupContext from '../RadioGroup/RadioGroupContext';
 
@@ -153,6 +154,7 @@ const ListRoot = styled(StyledList, {
  */
 const List = React.forwardRef(function List(inProps, ref) {
   const nesting = React.useContext(NestedListContext);
+  const group = React.useContext(GroupListContext);
   const radioGroupContext = React.useContext(RadioGroupContext);
   const props = useThemeProps<typeof inProps & { component?: React.ElementType }>({
     props: inProps,
@@ -176,6 +178,9 @@ const List = React.forwardRef(function List(inProps, ref) {
   const size = sizeProp || (inProps.size ?? 'md');
 
   let role;
+  if (group) {
+    role = 'group';
+  }
   if (radioGroupContext) {
     role = 'presentation';
   }

packages/mui-joy/src/ListItem/ListItem.tsx

@@ -17,6 +17,7 @@ import RowListContext from '../List/RowListContext';
 import WrapListContext from '../List/WrapListContext';
 import ComponentListContext from '../List/ComponentListContext';
 import ListSubheaderDispatch from '../ListSubheader/ListSubheaderContext';
+import GroupListContext from '../List/GroupListContext';
 
 const useUtilityClasses = (ownerState: ListItemOwnerState) => {
   const { sticky, nested, nesting, variant, color } = ownerState;
@@ -148,6 +149,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
     name: 'JoyListItem',
   });
 
+  const group = React.useContext(GroupListContext);
   const listComponent = React.useContext(ComponentListContext);
   const row = React.useContext(RowListContext);
   const wrap = React.useContext(WrapListContext);
@@ -175,7 +177,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
   const component =
     componentProp || (listElement && !listElement.match(/^(ul|ol|menu)$/) ? 'div' : undefined);
 
-  let role;
+  let role = group === 'menu' ? 'none' : undefined;
 
   if (listComponent) {
     // ListItem can be used inside Menu to create nested menus, so it should have role="none"

packages/mui-joy/src/Menu/Menu.tsx

@@ -8,6 +8,7 @@ import useMenu, { MenuProvider } from '@mui/base/useMenu';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { StyledList } from '../List/List';
 import ListProvider, { scopedVariables } from '../List/ListProvider';
+import GroupListContext from '../List/GroupListContext';
 import { styled, useThemeProps } from '../styles';
 import ColorInversion, { useColorInversion } from '../styles/ColorInversion';
 import { MenuTypeMap, MenuOwnerState } from './MenuProps';
@@ -159,14 +160,16 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
   const result = (
     <PopperUnstyled {...rootProps} modifiers={modifiers}>
       <MenuProvider value={contextValue}>
-        <ListProvider nested>
-          {disablePortal ? (
-            children
-          ) : (
-            // For portal popup, the children should not inherit color inversion from the upper parent.
-            <ColorInversion.Provider value={undefined}>{children}</ColorInversion.Provider>
-          )}
-        </ListProvider>
+        <GroupListContext.Provider value="menu">
+          <ListProvider nested>
+            {disablePortal ? (
+              children
+            ) : (
+              // For portal popup, the children should not inherit color inversion from the upper parent.
+              <ColorInversion.Provider value={undefined}>{children}</ColorInversion.Provider>
+            )}
+          </ListProvider>
+        </GroupListContext.Provider>
       </MenuProvider>
     </PopperUnstyled>
   );

packages/mui-joy/src/MenuList/MenuList.tsx

@@ -9,6 +9,7 @@ import { styled, useThemeProps } from '../styles';
 import { useColorInversion } from '../styles/ColorInversion';
 import { StyledList } from '../List/List';
 import ListProvider, { scopedVariables } from '../List/ListProvider';
+import GroupListContext from '../List/GroupListContext';
 import { MenuListOwnerState, MenuListTypeMap } from './MenuListProps';
 import { getMenuListUtilityClass } from './menuListClasses';
 
@@ -126,7 +127,9 @@ const MenuList = React.forwardRef(function MenuList(inProps, ref) {
   return (
     <MenuListRoot {...listboxProps}>
       <MenuProvider value={menuContextValue}>
-        <ListProvider nested>{children}</ListProvider>
+        <GroupListContext.Provider value="menu">
+          <ListProvider nested>{children}</ListProvider>
+        </GroupListContext.Provider>
       </MenuProvider>
     </MenuListRoot>
   );

packages/mui-joy/src/Select/Select.tsx

@@ -16,6 +16,7 @@ import { SelectOption } from '@mui/base/useOption';
 import composeClasses from '@mui/base/composeClasses';
 import { StyledList } from '../List/List';
 import ListProvider, { scopedVariables } from '../List/ListProvider';
+import GroupListContext from '../List/GroupListContext';
 import Unfold from '../internal/svg-icons/Unfold';
 import { styled, useThemeProps } from '../styles';
 import ColorInversion, { useColorInversion } from '../styles/ColorInversion';
@@ -584,8 +585,10 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
         modifiers={modifiers}
       >
         <SelectProvider value={context}>
-          {/* for building grouped options */}
-          <ListProvider nested>{children}</ListProvider>
+          <GroupListContext.Provider value="select">
+            {/* for building grouped options */}
+            <ListProvider nested>{children}</ListProvider>
+          </GroupListContext.Provider>
         </SelectProvider>
       </SlotListbox>
     );