[DataGrid] Pass slot props to columnHeaders slot

[cherniavskii]

Fixes #12749

[mui-bot]

Deploy preview: https://deploy-preview-12768--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 465f0b3

[cherniavskii]

We tend to forget to pass slot props.
Is this a problem we want to solve in a general way?

A few ideas:

1. Slot component:

   <Slot
     slotName="columnHeaders"
     ref={columnsContainerRef}
     visibleColumns={visibleColumns}
     // ...
   />
   
   function Slot<TSlotName extends keyof GridSlotProps & keyof GridSlotsComponent>({
     slotName,
     ...props
   }: GridSlotProps[TSlotName] & { slotName: TSlotName }) {
     const rootProps = useGridRootProps();
     const Component = rootProps.slots[slotName] as React.ElementType;
     return <Component {...props} {...rootProps.slotProps?.[slotName]} />;
   }

2. useSlot hook:

   const [Slot, slotProps] = useSlot('columnHeaders');
   // + ESLint rule to enforce the usage of `slotProps`
   
   <Slot
     slotName="columnHeaders"
     ref={columnsContainerRef}
     visibleColumns={visibleColumns}
     {...slotProps}
   />
   
   const useSlot = <TSlot extends keyof GridSlotProps & keyof GridSlotsComponent>(slot: TSlot) => {
     const rootProps = useGridRootProps();
     const Component = rootProps.slots[slot];
     const slotProps = rootProps.slotProps?.[slot];
     return [Component, slotProps] as const;
   };

cc @mui/xgrid

[romgrk]

If we can make an eslint rule for 2, we can probably make one to just enfore it with <rootProps.slots.x {...rootProps.slotProps.x} />. I would prefer that. After that option 2. After that option 1.

[flaviendelangle]

On the pickers and tree view we are always using useSlotProps (except on one instance of a transition component where it's not really doable).
That way we always have the same DX and we didn't forget to pass any slot props for a very long time.
This is a hook from the core team so it also improve the consistency of the codebase and allow to support callback version of the slotProps (which you don't from what I can see).

[trbagley-gresham]

Is it also worth exporting GridColumnHeadersProps as part of this PR so that GridColumnHeaders can easily be extended?

[cherniavskii]

@trbagley-gresham You can use GridSlotProps['columnHeaders'] instead

[MBilalShafi]

I assume the suggested improvement of the larger problem will be handled separately, right?