[charts] Support module augmentation for slots

[flaviendelangle]

All the slots in @mui/x-charts and @mui/x-charts-pro packages should support module augmentation.
This allows to pass custom props to your slots without casting the types.

Here is how it works on the data grid:

declare module '@mui/x-data-grid' {
  interface ToolbarPropsOverrides {
    name: string;
    setName: (name: string) => void;
  }
}

You can then use your custom slot without any type casting:

function CustomToolbar({ name, setName }: PropsFromSlot<GridSlots['toolbar']>) {
  return <input value={name} onChange={(event) => setName(event.target.value)} />;
}

function MyApp() {
  const [name, setName] = React.useState('');
  return (
    <DataGrid
      rows={[]}
      columns={[]}
      slots={{ toolbar: CustomToolbar }}
      slotProps={{
        toolbar: { name, setName },
      }}
    />
  );
}

Search keywords: