[system][Stack] Fix displaying of rendering 0 when divider prop is passed

[sai6855]

Before preview: https://mui.com/material-ui/react-stack/#basics

after preview: https://deploy-preview-44126--material-ui.netlify.app/material-ui/react-stack/#basics

Place below code in both preview to see the difference, in after preview 0 is rendered but not in before preview

import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';


export default function BasicStack() {
  return (
    <Box sx={{ width: '100%' }}>
      <Stack spacing={2} divider={<div />}>
        <div>Item 1</div>
        {0}
        <div>Item 2</div>
        <div>Item 3</div>
      </Stack>
    </Box>
  );
}

I was going through this issue #43969 and found logic mentioned here as bit weird as 0 would get skipped by .filter(Boolean)

[mui-bot]

Netlify deploy preview

https://deploy-preview-44126--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against be8feec

[oliviertassinari]

• Shouldn't this be using getValidReactChildren()?
• I guess we miss

    if (isFragment(summary)) {
      return new Error('Not accepting Fragments');
    }

in getValidReactChildren()

• It looks like Stepper, SpeedDial, Breadcrumbs, AvatarGroup should use that helper too.

[sai6855]

Shouldn't this be using getValidReactChildren()?

Not sure about this, React.isValidElement is being used inside getValidReactChildren and React.isValidElement is returning false when any number or strings are passed (attached reference for this below).

So if we want to directly render numbers or strings without wrapping in html tags/React components, i think these would get skipped.

Edit: ping @oliviertassinari

[oliviertassinari]

@sai6855 I suspect it's a bug of getValidReactChildren(). Looking at how it's used, we could expect "Three" to be shown in https://stackblitz.com/edit/react-wy3ghg?file=Demo.tsx no?

[oliviertassinari]

And then, we could use

material-ui/packages/mui-material/src/Tooltip/Tooltip.js

Line 562 in ca63707

if (!title && title !== 0) {

as inspiration on how to detect this.

[sai6855]

we could expect "Three" to be shown in no?

It's interesting that you're expecting "Three" to be displayed. According to the ButtonGroup definition from the docs and demos, if i place "Three" as an immediate child inside ButtonGroup, I wouldn’t be surprised if it gets skipped or any non-Button elements gets skipped

However, in the case of Stack, all numbers and strings are displayed except 0, so I would consider this a bug.