Stack shows dividers between null children

[githorse]

Steps to reproduce

Stackblitz example

Current behavior

When a child element returns null (conditionally), the Stack still treats this as a child and inserts a divider, even though there is no DOM element to divide:

Expected behavior

I would have expected that null children would not be treated as DOM elements and not produce any dividers.

Context

I have an action/navigation bar with several sections. Under some conditions, some of those sections don't make any sense, and so the components that render them return null in that case. I don't want the dividers to show up around invisible sections.

Your environment

npx @mui/envinfo

``` System: OS: macOS 14.6.1 Binaries: Node: 22.6.0 - /opt/homebrew/bin/node npm: 10.8.2 - /opt/homebrew/bin/npm pnpm: Not Found Browsers: Chrome: 129.0.6668.89 npmPackages: @emotion/react: 11.13.3 @emotion/styled: 11.13.0 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.16.7 @mui/icons-material: ^5.15.12 => 5.16.7 @mui/lab: 5.0.0-alpha.173 @mui/material: ^5.15.12 => 5.16.7 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 @mui/styles: 5.16.7 @mui/system: 5.16.7 @mui/types: 7.2.16 @mui/utils: 5.16.6 @mui/x-data-grid: 6.20.4 @mui/x-data-grid-premium: 6.20.4 @mui/x-data-grid-pro: 6.20.4 @mui/x-date-pickers: 5.0.20 @mui/x-date-pickers-pro: 5.0.20 @mui/x-license-pro: 6.10.2 @types/react: ^18.0.25 => 18.3.4 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 typescript: ^5.4.5 => 5.5.4 ```

Search keywords: stack divider child children null

[KirankumarAmbati]

packages/mui-system/src/Stack/createStack.tsx -> joinChildren function filters out falsy children sent to it as:

const childrenArray = React.Children.toArray(children).filter(Boolean);

A component that return null, is still a react component. Hence, it is not being evaluated to false.