`List` skips child components that are indirectly composed of `List.Item`

What package has an issue

@mantine/core

Describe the bug

function MyList() {
  return (
    <List>
      {
        ['a', 'b', 'c'].map((value, i) => (
          <MyListItem item={value} key={i} />
        )
      }
    </List>
  )
}

function MyListItem({ item }) {
  return (
    <List.Item>{item}</List.Item>
  )
}

The above code doesn’t render anything inside the List. However, it is expected to render List.Items

This is caused by filterChildByType function here: https://github.com/mantinedev/mantine/blob/a140cbca9dbf0f90b2314b25a64cc58413dacbc5/src/mantine-core/src/components/List/List.tsx#L68

In which browser did the problem occur

Firefox

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

A possible fix is to introduce a new prop named indirectItems or noFilterChildren that skips filtering children.

[rtivital]

Fixed in 4.0.2

[rtivital]

Timeline.Item depends on its index, there is no way of getting this index during ssr, so it will remain as is (it will not be migrated to context as List.Item).