[Select][Joy] Fix forwarding listbox component prop

docs/data/joy/components/select/SelectGroupedOptions.js

@@ -41,11 +41,10 @@ export default function SelectGroupedOptions() {
         <React.Fragment key={name}>
           {index !== 0 && <ListDivider role="none" />}
           <List
-            role="group"
             aria-labelledby={`select-group-${name}`}
             sx={{ '--List-decorator-size': '28px' }}
           >
-            <ListItem role="presentation" id={`select-group-${name}`} sticky>
+            <ListItem id={`select-group-${name}`} sticky>
               <Typography level="body3" textTransform="uppercase" letterSpacing="md">
                 {name} ({animals.length})
               </Typography>

docs/data/joy/components/select/select.md

@@ -103,7 +103,7 @@ We're also using the `ListDivider` as a visual separator.
 Take a look at [selected value appearance](#selected-value-appearance) to see how to customize its appearance.
 :::
 
-#### Group options
+### Grouped options
 
 To create a [listbox with grouped options](https://www.w3.org/WAI/ARIA/apg/example-index/listbox/listbox-grouped.html), wrap the `Option` with `List` component and provide an associated label using `ListItem`.
 That way, you'll have a consistent height and will be able to leverage nested CSS variables.

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

@@ -87,6 +87,7 @@ export const ListRoot = styled('ul', {
       marginInlineStart: 'var(--NestedList-marginLeft)',
       marginInlineEnd: 'var(--NestedList-marginRight)',
       marginBlockStart: 'var(--List-gap)',
+      marginBlockEnd: 'initial', // reset user agent stylesheet.
     },
     !ownerState.nesting && {
       ...applySizeVars(ownerState.size),

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

@@ -25,6 +25,7 @@ const ListDividerRoot = styled('li', {
   border: 'none', // reset the border for `hr` tag
   listStyle: 'none',
   backgroundColor: theme.vars.palette.divider, // use logical size + background is better than border because they work with gradient.
+  flexShrink: 0,
   ...(ownerState.row && {
     inlineSize: 'var(--ListDivider-thickness, 1px)',
     marginBlock: ownerState.inset === 'gutter' ? 'var(--List-item-paddingY)' : 0,

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

@@ -22,6 +22,7 @@ import Unfold from '../internal/svg-icons/Unfold';
 import { styled, useThemeProps } from '../styles';
 import { SelectOwnProps, SelectStaticProps, SelectOwnerState, SelectTypeMap } from './SelectProps';
 import selectClasses, { getSelectUtilityClass } from './selectClasses';
+import { ListOwnerState } from '../List';
 
 function defaultRenderSingleValue<TValue>(selectedOption: SelectOption<TValue> | null) {
   return selectedOption?.label ?? '';
@@ -450,7 +451,7 @@ const Select = React.forwardRef(function Select<TValue>(
     [resolveListboxProps?.modifiers],
   );
 
-  const listboxProps = useSlotProps({
+  const { component: listboxComponent, ...listboxProps } = useSlotProps({
     elementType: SelectListbox,
     getSlotProps: getListboxProps,
     externalSlotProps: componentsProps.listbox,
@@ -460,15 +461,14 @@ const Select = React.forwardRef(function Select<TValue>(
       disablePortal: true,
       open: listboxOpen,
       placement: 'bottom' as const,
-      component: SelectListbox,
       modifiers: cachedModifiers,
     },
     ownerState: {
       ...ownerState,
-      // @ts-ignore internal logic
       nesting: false,
       row: false,
-    },
+      wrap: false,
+    } as SelectOwnerState<any> & ListOwnerState,
     className: classes.listbox,
   });
 
@@ -517,8 +517,10 @@ const Select = React.forwardRef(function Select<TValue>(
         {indicator && <SelectIndicator {...indicatorProps}>{indicator}</SelectIndicator>}
       </SelectRoot>
       {anchorEl && (
-        <PopperUnstyled {...listboxProps}>
+        // @ts-ignore internal logic: `listboxComponent` should not replace `SelectListbox`.
+        <PopperUnstyled {...listboxProps} as={listboxComponent} component={SelectListbox}>
           <SelectUnstyledContext.Provider value={context}>
+            {/* for building grouped options */}
             <ListProvider nested>{children}</ListProvider>
           </SelectUnstyledContext.Provider>
         </PopperUnstyled>

packages/mui-joy/src/Select/SelectProps.ts

@@ -3,7 +3,6 @@ import { OverridableStringUnion, OverrideProps } from '@mui/types';
 import { SelectUnstyledCommonProps, SelectOption } from '@mui/base/SelectUnstyled';
 import { PopperUnstyledOwnProps } from '@mui/base/PopperUnstyled';
 import { SlotComponentProps } from '@mui/base/utils';
-import { ListProps } from '../List/ListProps';
 import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
 
 export type SelectSlot =
@@ -28,7 +27,10 @@ interface ComponentsProps {
   indicator?: SlotComponentProps<'span', { sx?: SxProps }, SelectOwnerState<any>>;
   listbox?: SlotComponentProps<
     'ul',
-    Omit<PopperUnstyledOwnProps, 'components' | 'componentsProps' | 'open'> & ListProps,
+    Omit<PopperUnstyledOwnProps, 'components' | 'componentsProps' | 'open'> & {
+      component?: React.ElementType;
+      sx?: SxProps;
+    },
     SelectOwnerState<any>
   >;
 }

test/regressions/fixtures/SelectJoy/GroupedOptionSelect.js

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Select from '@mui/joy/Select';
+import Option, { optionClasses } from '@mui/joy/Option';
+import Chip from '@mui/joy/Chip';
+import List from '@mui/joy/List';
+import ListItemDecorator, { listItemDecoratorClasses } from '@mui/joy/ListItemDecorator';
+import ListDivider from '@mui/joy/ListDivider';
+import ListItem from '@mui/joy/ListItem';
+import Typography from '@mui/joy/Typography';
+import Check from '@mui/icons-material/Check';
+
+export default function SelectGroupedOptions() {
+  const group = {
+    Land: ['Cat', 'Dog', 'Tiger', 'Reindeer', 'Raccoon'],
+    Water: ['Dolphin', 'Flounder', 'Eel'],
+    Air: ['Falcon', 'Winged Horse', 'Owl'],
+  };
+  const colors = {
+    Land: 'neutral',
+    Water: 'primary',
+    Air: 'success',
+  };
+  return (
+    <Box sx={{ minHeight: 300 }}>
+      <Select
+        placeholder="Choose your animal"
+        defaultListboxOpen
+        componentsProps={{
+          listbox: {
+            component: 'div',
+            sx: {
+              maxHeight: 240,
+              overflow: 'auto',
+              '--List-padding': '0px',
+            },
+          },
+        }}
+        sx={{ width: 240 }}
+      >
+        {Object.entries(group).map(([name, animals], index) => (
+          <React.Fragment key={name}>
+            {index !== 0 && <ListDivider role="none" />}
+            <List aria-labelledby={`select-group-${name}`} sx={{ '--List-decorator-size': '28px' }}>
+              <ListItem id={`select-group-${name}`} sticky>
+                <Typography level="body3" textTransform="uppercase" letterSpacing="md">
+                  {name} ({animals.length})
+                </Typography>
+              </ListItem>
+              {animals.map((anim) => (
+                <Option
+                  key={anim}
+                  value={anim}
+                  label={
+                    <React.Fragment>
+                      <Chip
+                        size="sm"
+                        color={colors[name]}
+                        sx={{ borderRadius: 'xs', mr: 1, ml: -0.5 }}
+                      >
+                        {name}
+                      </Chip>{' '}
+                      {anim}
+                    </React.Fragment>
+                  }
+                  sx={{
+                    [`&.${optionClasses.selected} .${listItemDecoratorClasses.root}`]: {
+                      opacity: 1,
+                    },
+                  }}
+                >
+                  <ListItemDecorator sx={{ opacity: 0 }}>
+                    <Check />
+                  </ListItemDecorator>
+                  {anim}
+                </Option>
+              ))}
+            </List>
+          </React.Fragment>
+        ))}
+      </Select>
+    </Box>
+  );
+}