feat: support Component and Element for List props

[guilbill]

Problem

In order to have a better developper experience we want to simplify the way we customise the List sub-component (eg: actions, filters, aside, pagination).

Solution

Allow to use React.ComponentType in addition to ReactElement.

  const Actions = () => <Box sx={{ backgroundColor: 'info.main' }}>Actions</Box>;
  <List actions={Actions}>
      <BookList />
  </List>

or

    <List
        actions={
            <Box sx={{ backgroundColor: 'info.main' }}>
                Actions
            </Box>
        }
    >
        <BookList />
    </List>

How To Test

Create a List using a component (actions={Actions})

Additional Checks

• The PR targets master for a bugfix, or next for a feature
• The PR includes unit tests (if not possible, describe why)
• The PR includes one or several stories (if not possible, describe why)
• The documentation is up to date

Also, please make sure to read the contributing guidelines.

[slax57]

thought: I'd be tempted to use the component syntax in the example above (since it's shorter and offers better performances), and simply mention that action also accepts the other types

Suggested change

	You can use a `ReactElement` (e.g. `actions={<ListActions/>}`), a `ComponentType` (e.g. `actions={ListActions}`) or false to disable it.
	**Tip:** `action` also accepts a `ReactElement` (e.g. `actions={<ListActions/>}`), or `false`.

But on the other hand, it may be odd to encourage this syntax only for the List component (since it's the only one we support for now...)

So I'm hesitating.

Same remark applies to other props below.

@fzaninotto @djhi wdyt?

[slax57]

suggestion: I believe ComponentType designates the type of such a component, but my understanding is that you can speak of a React Component (and a React Element)

Suggested change

	Pass a React element or ComponentType as the `aside` prop for that purpose:
	Pass a React element or component as the `aside` prop for that purpose:

[guilbill]

But it IS expected a ComponentType (as defined in the ListViewProps), otherwise we couldn't do aside={Aside}. It let's the responsibility of the instanciation of the subcomponent (aside) to the component (List).

[slax57]

Suggested change

	You can use the `empty` prop to replace that page by a custom component, passing a ReactElement or ComponentType :
	You can use the `empty` prop to replace that page by a custom React element or component:

[slax57]

Suggested change

	The `pagination` prop allows to replace the default pagination controls by your own, either with a ReactElement or a ComponentType.
	The `pagination` prop allows to replace the default pagination controls by your own, either with a React element or component.

[slax57]

Suggested change

	The title can be a string, a React element, a ComponentType or `false` to disable the title.
	The title can be a string, a React element, a React component or `false` to disable the title.

[slax57]

Suggested change

	expect(screen.queryAllByText('Hello')).toHaveLength(1);
	screen.getByText('Hello');

[slax57]

Suggested change

	await waitFor(() => {
	expect(screen.queryByText('resources.posts.empty')).toBeNull();
	screen.getByText('Custom Empty');
	});
	await screen.findByText('Custom Empty');
	expect(screen.queryByText('resources.posts.empty')).toBeNull();

[slax57]

linter warning at this line

[slax57]

thought: IMO we should use ReactNode instead of ReactElement

Suggested change

	actions?: ReactElement | ComponentType | false;
	actions?: ReactNode | ComponentType;

I'd go even further and would say that the getElement implementation is currently too restrictive.

According to the React docs:

Note isValidElement checks whether the argument is a React element, not whether it’s a React node. For example, 42 is not a valid React element. However, it is a perfectly valid React node.

So to me, the implementation should be the following:

const getElement = (ElementOrComponent: ComponentType | ReactNode) => {
    if (isValidElementType(ElementOrComponent)) {
        const Element = ElementOrComponent as ComponentType;
        return <Element />;
    }
    return ElementOrComponent;
};

Same applies to other props below.

@fzaninotto @djhi wdyt?