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

[Grid] Fix prop-type key regression #33123

Merged
merged 3 commits into from Jun 13, 2022

Conversation

oliviertassinari
Copy link
Member

Fix #31998 (comment), first commit at the surface, the second commit at the root.

@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work component: Grid The React component. regression A bug, but worse labels Jun 12, 2022
@mui-bot
Copy link

mui-bot commented Jun 12, 2022

Details of bundle changes

Generated by 🚫 dangerJS against 0d498c2

// key is a reserved prop name in React
// e.g. https://github.com/reactjs/rfcs/pull/107
// no need to add a prop-type if we won't generate the docs for it.
if (data.prop.name === 'key' && data.prop.jsDoc === '@ignore') {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

data.prop.jsDoc === '@ignore' is because we have a custom prop-type for the key in

/**
* When displaying multiple consecutive Snackbars from a parent rendering a single
* <Snackbar/>, add the key prop to ensure independent treatment of each message.
* e.g. <Snackbar key={message} />, otherwise, the message may update-in-place and
* features such as autoHideDuration may be canceled.
*/
key: () => null,

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ignore is applied when there are no prop descriptions:

!prop.jsDoc ||
(ignoreExternalDocumentation[component.name] &&
ignoreExternalDocumentation[component.name].includes(prop.name))
) {
prop.jsDoc = '@ignore';

@@ -235,7 +235,7 @@ const GridRoot = styled('div', {
breakpoints.forEach((breakpoint) => {
const value = ownerState[breakpoint];

if (value !== false) {
if (value) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's a boolean, so either true, false, null, or undefined.


breakpoints.keys.forEach((key) => {
if (key in propsRest) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is why the key prop was added. TypeScript has some dark magic that makes him think that a key prop might be present here. If you remove key in propsRest then we are good. As a side note, we might have preferred using propsRest.hasOwnProperty(key) over key in propsRest systemically per https://masteringjs.io/tutorials/fundamentals/hasownproperty.

In our case, I could get away with only a nullish check.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hasOwnProperty makes sense too, but the nullish check reads better to me 👍

@oliviertassinari oliviertassinari merged commit 45bcef6 into mui:master Jun 13, 2022
@oliviertassinari oliviertassinari deleted the grid-fix-regression branch June 13, 2022 12:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: Grid The React component. regression A bug, but worse
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants