[material-ui] Remove few more React.ReactElement<any> types #44290

sai6855 · 2024-11-01T07:49:20Z

Part of: #42380

All of remaining instances of React.ReactElement<any> are in same file, i'll create a seprate PR for it.

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2024-11-01T07:51:49Z

Netlify deploy preview

https://deploy-preview-44290--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against d73a827

DiegoAndai

Thanks for working on this @sai6855!

DiegoAndai · 2024-11-08T18:15:46Z

docs/data/material/components/modal/SpringModal.tsx

@@ -7,7 +7,7 @@ import Typography from '@mui/material/Typography';
 import { useSpring, animated } from '@react-spring/web';

 interface FadeProps {
-  children: React.ReactElement<any>;
+  children: React.JSX.Element;


I think the change of these should be

-children: React.ReactElement<any>; +children: React.ReactElement<unknown>;

Why React.JSX.Element?

Typescript is throwing error in below line, if React.ReactElement<unknown> is used as if doesn't have onClick type, hence i went with React.JSX.Element

material-ui/docs/data/material/components/modal/SpringModal.tsx

Line 45 in 506ea4c

{React.cloneElement(children, { onClick })}

Then we should do React.ReactElement<{ onClick: React.MouseEventHandler}>, because we require the children to support this prop.

Ahhh, i had posted reason in above comment why i didn't went with React.ReactElement<{ onClick: React.MouseEventHandler}> somehow it didn't get saved.

Anyway, if i went with React.ReactElement<{onClick?:React.MouseEventHandler}> ts throwing below error here (on line 79)

material-ui/docs/data/material/components/modal/SpringModal.tsx

Lines 77 to 81 in 506ea4c

slotProps={{

backdrop: {

TransitionComponent: Fade,

},

}}

Types of property 'props' are incompatible. Type 'unknown' is not assignable to type '{ onClick?: MouseEventHandler<Element> | undefined; }'.

I wasn't sure how to fix above error hence went with React.JSX.Element

Ok, at this point, I think it's better to keep React.ReactElement<any> in this file (which is virtually the same as having React.JSX.Element), so let's go with React.ReactElement<any> to make it explicit.

sai6855 · 2024-11-12T13:09:03Z

packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx

-  const createHandleSynthetic = (handlerName: string) => (event: React.SyntheticEvent) => {
+  type ReactSyntheticEventName = ClickAwayMouseEventHandler | ClickAwayTouchEventHandler;
+
+  const createHandleSynthetic = (handlerName: ReactSyntheticEventName) => (event: any) => {


event is tricky to type here, we need to narrow type of event based on handlerName

For example, if handlerName is OnTouchStart type of event should be React.TouchEvent, if handlerName is onClick type of event should be React.MouseEvent.

I'm not sure if above functionlaity can be achived without adding some runtime code, i'm not sure if it's worth here.

What about React.UIEvent?

Even React.UIEvent isn't working.

Let's revert to children: React.ReactElement<any>; in this one (all changes in this file). We can fix it in the future if we have a report from a user.

DiegoAndai · 2024-11-26T15:34:35Z

docs/data/material/components/modal/SpringModal.tsx

@@ -7,7 +7,7 @@ import Typography from '@mui/material/Typography';
 import { useSpring, animated } from '@react-spring/web';

 interface FadeProps {
-  children: React.ReactElement<any>;
+  children: React.JSX.Element;


Ok, at this point, I think it's better to keep React.ReactElement<any> in this file (which is virtually the same as having React.JSX.Element), so let's go with React.ReactElement<any> to make it explicit.

DiegoAndai · 2024-11-26T15:36:10Z

packages/mui-styles/src/ServerStyleSheets/ServerStyleSheets.d.ts

@@ -5,7 +5,7 @@ declare class ServerStyleSheets {
  constructor(options?: object);
  collect(children: React.ReactNode, options?: object): React.ReactElement<StylesProviderProps>;
  toString(): string;
-  getStyleElement(props?: object): React.ReactElement<any>;
+  getStyleElement(props?: object): React.JSX.Element;


Let's keep React.ReactElement<any> here as well

fixed here 451e23d and 188a956

DiegoAndai · 2024-11-26T15:42:49Z

packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx

-  const createHandleSynthetic = (handlerName: string) => (event: React.SyntheticEvent) => {
+  type ReactSyntheticEventName = ClickAwayMouseEventHandler | ClickAwayTouchEventHandler;
+
+  const createHandleSynthetic = (handlerName: ReactSyntheticEventName) => (event: any) => {


What about React.UIEvent?

…/material-ui into repalce-unknown-with-any

remove any types

50bc79b

sai6855 marked this pull request as draft November 1, 2024 07:49

sai6855 added typescript package: material-ui Specific to @mui/material labels Nov 1, 2024

sai6855 added 2 commits November 1, 2024 13:30

fix type

46d1bc0

fix types

aa8a297

sai6855 changed the title ~~[material-ui] Remove React.ReactElement<any> types~~ [material-ui] Remove few more React.ReactElement<any> types Nov 1, 2024

sai6855 marked this pull request as ready for review November 1, 2024 13:25

sai6855 requested a review from DiegoAndai November 1, 2024 13:25

DiegoAndai reviewed Nov 8, 2024

View reviewed changes

sai6855 and others added 10 commits November 12, 2024 08:39

fix joy theme builder type

3d50f18

fix slider value label types

70a84b0

fix focus trap

7760be7

Merge branch 'master' into repalce-unknown-with-any

1394918

fix types

112cb6b

fix types

9ee8ebf

fix types

4c25e9f

undo

7aec3b3

pnpm prettier

a33544a

fix

49e9f80

sai6855 commented Nov 12, 2024

View reviewed changes

Merge branch 'master' into repalce-unknown-with-any

f22931c

DiegoAndai reviewed Nov 26, 2024

View reviewed changes

sai6855 and others added 5 commits November 26, 2024 21:20

fix serverstyles

451e23d

fix springmodal

188a956

Merge branch 'master' into repalce-unknown-with-any

59cf800

revert clickaway listerner

6857da5

Merge branch 'repalce-unknown-with-any' of https://github.com/sai6855…

d73a827

…/material-ui into repalce-unknown-with-any

sai6855 requested a review from DiegoAndai November 27, 2024 05:37

DiegoAndai approved these changes Nov 28, 2024

View reviewed changes

DiegoAndai merged commit e1479de into mui:master Nov 28, 2024
22 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[material-ui] Remove few more React.ReactElement<any> types #44290

[material-ui] Remove few more React.ReactElement<any> types #44290

sai6855 commented Nov 1, 2024 •

edited

Loading

mui-bot commented Nov 1, 2024 •

edited

Loading

DiegoAndai left a comment

DiegoAndai Nov 8, 2024

sai6855 Nov 11, 2024

DiegoAndai Nov 11, 2024

sai6855 Nov 12, 2024

DiegoAndai Nov 26, 2024

sai6855 Nov 12, 2024 •

edited

Loading

DiegoAndai Nov 26, 2024

sai6855 Nov 26, 2024

DiegoAndai Nov 26, 2024

DiegoAndai Nov 26, 2024

DiegoAndai Nov 26, 2024

sai6855 Nov 26, 2024 •

edited

Loading

DiegoAndai Nov 26, 2024

[material-ui] Remove few more React.ReactElement<any> types #44290

[material-ui] Remove few more React.ReactElement<any> types #44290

Conversation

sai6855 commented Nov 1, 2024 • edited Loading

mui-bot commented Nov 1, 2024 • edited Loading

Netlify deploy preview

Bundle size report

DiegoAndai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sai6855 Nov 12, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sai6855 Nov 26, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sai6855 commented Nov 1, 2024 •

edited

Loading

mui-bot commented Nov 1, 2024 •

edited

Loading

sai6855 Nov 12, 2024 •

edited

Loading

sai6855 Nov 26, 2024 •

edited

Loading