{"action":"created","issue":{"url":"https://api.github.com/repos/mui-org/material-ui/issues/10476","repository_url":"https://api.github.com/repos/mui-org/material-ui","labels_url":"https://api.github.com/repos/mui-org/material-ui/issues/10476/labels{/name}","comments_url":"https://api.github.com/repos/mui-org/material-ui/issues/10476/comments","events_url":"https://api.github.com/repos/mui-org/material-ui/issues/10476/events","html_url":"https://github.com/mui-org/material-ui/issues/10476","id":301096318,"number":10476,"title":"Issues with type declarations for ListItem and MenuItem","user":{"login":"mbrowne","id":874316,"avatar_url":"https://avatars0.githubusercontent.com/u/874316?v=4","gravatar_id":"","url":"https://api.github.com/users/mbrowne","html_url":"https://github.com/mbrowne","followers_url":"https://api.github.com/users/mbrowne/followers","following_url":"https://api.github.com/users/mbrowne/following{/other_user}","gists_url":"https://api.github.com/users/mbrowne/gists{/gist_id}","starred_url":"https://api.github.com/users/mbrowne/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mbrowne/subscriptions","organizations_url":"https://api.github.com/users/mbrowne/orgs","repos_url":"https://api.github.com/users/mbrowne/repos","events_url":"https://api.github.com/users/mbrowne/events{/privacy}","received_events_url":"https://api.github.com/users/mbrowne/received_events","type":"User","site_admin":false},"labels":[{"id":672358040,"url":"https://api.github.com/repos/mui-org/material-ui/labels/typescript","name":"typescript","color":"006b75","default":false}],"state":"closed","locked":false,"assignee":{"login":"oliviertassinari","id":3165635,"avatar_url":"https://avatars2.githubusercontent.com/u/3165635?v=4","gravatar_id":"","url":"https://api.github.com/users/oliviertassinari","html_url":"https://github.com/oliviertassinari","followers_url":"https://api.github.com/users/oliviertassinari/followers","following_url":"https://api.github.com/users/oliviertassinari/following{/other_user}","gists_url":"https://api.github.com/users/oliviertassinari/gists{/gist_id}","starred_url":"https://api.github.com/users/oliviertassinari/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oliviertassinari/subscriptions","organizations_url":"https://api.github.com/users/oliviertassinari/orgs","repos_url":"https://api.github.com/users/oliviertassinari/repos","events_url":"https://api.github.com/users/oliviertassinari/events{/privacy}","received_events_url":"https://api.github.com/users/oliviertassinari/received_events","type":"User","site_admin":false},"assignees":[{"login":"oliviertassinari","id":3165635,"avatar_url":"https://avatars2.githubusercontent.com/u/3165635?v=4","gravatar_id":"","url":"https://api.github.com/users/oliviertassinari","html_url":"https://github.com/oliviertassinari","followers_url":"https://api.github.com/users/oliviertassinari/followers","following_url":"https://api.github.com/users/oliviertassinari/following{/other_user}","gists_url":"https://api.github.com/users/oliviertassinari/gists{/gist_id}","starred_url":"https://api.github.com/users/oliviertassinari/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oliviertassinari/subscriptions","organizations_url":"https://api.github.com/users/oliviertassinari/orgs","repos_url":"https://api.github.com/users/oliviertassinari/repos","events_url":"https://api.github.com/users/oliviertassinari/events{/privacy}","received_events_url":"https://api.github.com/users/oliviertassinari/received_events","type":"User","site_admin":false}],"milestone":null,"comments":13,"created_at":"2018-02-28T16:41:00Z","updated_at":"2018-03-04T21:50:10Z","closed_at":"2018-03-01T22:09:53Z","author_association":"NONE","body":"There are missing props in the TypeScript type declaration file for ListItem, and also these types should ideally be generics.\r\n\r\n<!--\r\n    Thank you very much for contributing to Material-UI by creating an issue! ❤️\r\n    To avoid duplicate issues we ask you to check off the following list.\r\n-->\r\n\r\n<!-- Checked checkbox should look like this: [x] -->\r\n- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.\r\n\r\n## Expected Behavior\r\n<!---\r\n    If you're describing a bug, tell us what should happen.\r\n    If you're suggesting a change/improvement, tell us how it should work.\r\n-->\r\nIt should be possible to use the `ContainerComponent` and `ContainerProps` props of the `ListItem` component from TypeScript. Also, I expected that `ListItem` and `MenuItem` would be generic types to account for the fact that any additional props are passed to the component specified by the `component` prop, but they're not. To be specific, in [this file](https://github.com/mui-org/material-ui/blob/v1-beta/src/Menu/MenuList.d.ts), the interface is currently defined like this:\r\n\r\n```\r\nexport interface MenuListProps ...\r\n```\r\nwhereas I would have expected to see something like this:\r\n```\r\nexport interface MenuListProps<TContainerComponentProps = {}> ...\r\n```\r\n\r\n## Current Behavior\r\n\r\nThis TypeScript (.tsx) code does not compile:\r\n\r\n```\r\n<ListItem ContainerComponent=\"div\" ContainerProps={{className: 'demo'}}>an item</ListItem>\r\n```\r\n\r\n## Steps to Reproduce (for bugs)\r\n\r\nCreate the following test component in TypeScript:\r\n\r\n```\r\nimport React from 'react'\r\nimport { ListItem, ListItemProps } from 'material-ui/List'\r\n\r\nconst Test: React.SFC<{}> = () => {\r\n    return <ListItem ContainerComponent=\"div\" ContainerProps={{className: 'demo'}}>an item</ListItem>\r\n}\r\nexport default Test\r\n```\r\n\r\n## Notes\r\n\r\nThe priority here is adding `ContainerComponent` and `ContainerProps` to the type declaration. Making it generic (e.g. `MenuListProps<TContainerComponentProps = {}>`) is arguably a best practice and would be nice, but might not be so practically useful in this case. If it were a class component it might be more helpful, but as far as I can tell, TypeScript does not provide a way to alias generic functions that would be any more concise than my current solution of using a typecast:\r\n\r\n```\r\nconst MyMenuItem = MenuItem as React.ComponentType<MenuItemProps & MyComponentProps>\r\n...\r\n    render() {\r\n        return <MyMenuItem component={MyComponent} somePropToMyComponent=\"demo\">an item</MyMenuItem>\r\n    }\r\n```\r\n\r\n## Your Environment\r\n<!--- Include as many relevant details about the environment with which you experienced the bug. -->\r\n\r\n| Tech         | Version |\r\n|--------------|---------|\r\n| Material-UI  | 1.0.0-beta.32        |\r\n| React        |  16.2.0       |\r\n| browser      | Chrome 64        |\r\n| TypeScript          |  2.7.1       |\r\n"},"comment":{"url":"https://api.github.com/repos/mui-org/material-ui/issues/comments/370267347","html_url":"https://github.com/mui-org/material-ui/issues/10476#issuecomment-370267347","issue_url":"https://api.github.com/repos/mui-org/material-ui/issues/10476","id":370267347,"user":{"login":"oliviertassinari","id":3165635,"avatar_url":"https://avatars2.githubusercontent.com/u/3165635?v=4","gravatar_id":"","url":"https://api.github.com/users/oliviertassinari","html_url":"https://github.com/oliviertassinari","followers_url":"https://api.github.com/users/oliviertassinari/followers","following_url":"https://api.github.com/users/oliviertassinari/following{/other_user}","gists_url":"https://api.github.com/users/oliviertassinari/gists{/gist_id}","starred_url":"https://api.github.com/users/oliviertassinari/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oliviertassinari/subscriptions","organizations_url":"https://api.github.com/users/oliviertassinari/orgs","repos_url":"https://api.github.com/users/oliviertassinari/repos","events_url":"https://api.github.com/users/oliviertassinari/events{/privacy}","received_events_url":"https://api.github.com/users/oliviertassinari/received_events","type":"User","site_admin":false},"created_at":"2018-03-04T21:50:10Z","updated_at":"2018-03-04T21:50:10Z","author_association":"OWNER","body":"> just have special logic to render ContainerComponent inline if it's a function instead of a class component.\r\n\r\n@pelotom We can take inspiration from the now removed recompose [referential transparency](https://github.com/acdlite/recompose/blob/d33a9446e23b099bb3725aa7b88b724e78397c03/docs/performance.md) [optimization](https://github.com/acdlite/recompose/blob/d33a9446e23b099bb3725aa7b88b724e78397c03/src/packages/recompose/isReferentiallyTransparentFunctionComponent.js). But this is no really what the render prop is about."}}
{"actor":{"display_login":"oliviertassinari"}}