[tree view] Allow callback form of useRef

[joshkel]

Summary

The apiRef for SimpleTreeView currently must be a MutableRefObject. If it supported any React ref - a callback instead of a mutable object - it would be more consistent with React and more flexible for developers.

Examples

const callback = (api: TreeViewPublicAPI) => { /* ... */ };
return <SimpleTreeView apiRef={ref}>{items}</SimpleTreeView>;

Motivation

Our component renders several smaller tree views, separated by subheaders. It would be helpful to have access to all of the tree views' APIs from the rendering component. A callback ref can be used to maintain a list, but there's no obvious way to make this work with a MutableRefObject.

See also #6234, which requests the same functionality for the data grid.

Search keywords: useRef

[michelengelen]

This seems like a viable proposal.
@flaviendelangle should we add this to the board, or add waiting for 👍🏼 for now?

[oliviertassinari]

This looks strange:

mui-x/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts

Line 30 in a943aef

inputApiRef.current = {} as T;

Why is it not using https://react.dev/reference/react/useImperativeHandle? I did a fix back in the days: #990.

What the data grid does seems better:

mui-x/packages/x-data-grid/src/hooks/core/useGridApiInitialization.ts

Line 149 in a943aef

React.useImperativeHandle(inputApiRef, () => publicApiRef.current, [publicApiRef]);

[flaviendelangle]

@flaviendelangle should we add this to the board, or add waiting for 👍🏼 for now?

I would wait to see how much traction we have yes.
I'm curious because I don't recall anyone asking for it on the grid, do they support it?

@oliviertassinari we could indeed align with the initialization logic of the grid