Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TreeView] Support module augmentation for slots #14062

Open
flaviendelangle opened this issue Aug 1, 2024 · 1 comment
Open

[TreeView] Support module augmentation for slots #14062

flaviendelangle opened this issue Aug 1, 2024 · 1 comment
Labels
component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! dx Related to developers' experience enhancement This is not a bug, nor a new feature typescript waiting for 👍 Waiting for upvotes

Comments

@flaviendelangle
Copy link
Member

flaviendelangle commented Aug 1, 2024

All the slots in @mui/x-tree-view and @mui/x-tree-view-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:

@flaviendelangle flaviendelangle added typescript waiting for 👍 Waiting for upvotes dx Related to developers' experience enhancement This is not a bug, nor a new feature component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! labels Aug 1, 2024
@vivere-dally
Copy link

This would be great

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! dx Related to developers' experience enhancement This is not a bug, nor a new feature typescript waiting for 👍 Waiting for upvotes
Projects
None yet
Development

No branches or pull requests

2 participants