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.

Sign up for GitHub

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

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

Merged
merged 19 commits into from
Nov 28, 2024
Merged

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
50bc79b
remove any types
sai6855 Nov 1, 2024
46d1bc0
fix type
sai6855 Nov 1, 2024
aa8a297
fix types
sai6855 Nov 1, 2024
3d50f18
fix joy theme builder type
sai6855 Nov 12, 2024
70a84b0
fix slider value label types
sai6855 Nov 12, 2024
7760be7
fix focus trap
sai6855 Nov 12, 2024
1394918
Merge branch 'master' into repalce-unknown-with-any
sai6855 Nov 12, 2024
112cb6b
fix types
sai6855 Nov 12, 2024
9ee8ebf
fix types
sai6855 Nov 12, 2024
4c25e9f
fix types
sai6855 Nov 12, 2024
7aec3b3
undo
sai6855 Nov 12, 2024
a33544a
pnpm prettier
sai6855 Nov 12, 2024
49e9f80
fix
sai6855 Nov 12, 2024
f22931c
Merge branch 'master' into repalce-unknown-with-any
sai6855 Nov 12, 2024
451e23d
fix serverstyles
sai6855 Nov 26, 2024
188a956
fix springmodal
sai6855 Nov 26, 2024
59cf800
Merge branch 'master' into repalce-unknown-with-any
sai6855 Nov 26, 2024
6857da5
revert clickaway listerner
sai6855 Nov 27, 2024
d73a827
Merge branch 'repalce-unknown-with-any' of https://github.com/sai6855…
sai6855 Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/data/material/components/modal/SpringModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Member

Choose a reason for hiding this comment

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

I think the change of these should be

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

Why React.JSX.Element?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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 })}

Copy link
Member

Choose a reason for hiding this comment

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

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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

Copy link
Member

Choose a reason for hiding this comment

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

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.

in?: boolean;
onClick?: any;
onEnter?: (node: HTMLElement, isAppearing: boolean) => void;
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/components/JoyThemeBuilder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1267,7 +1267,7 @@ function getAvailableTokens(colorSchemes: any, colorMode: 'light' | 'dark') {
return tokens;
}

function TemplatesDialog({ children, data }: { children: React.ReactElement<any>; data: any }) {
function TemplatesDialog({ children, data }: { children: React.JSX.Element; data: any }) {
const [open, setOpen] = React.useState(false);
const { map: templateMap } = sourceJoyTemplates();
const renderItem = (name: string, item: TemplateData) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export interface ClickAwayListenerProps {
/**
* The wrapped element.
*/
children: React.ReactElement<any>;
children: React.JSX.Element;
/**
* If `true`, the React tree is ignored and only the DOM tree is considered.
* This prop changes how portaled elements are handled.
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/Modal/useModal.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export type UseModalParameters = {
/**
* A single child content element.
*/
children: React.ReactElement<any> | undefined | null;
children: React.JSX.Element | undefined | null;
/**
* When set to true the Modal waits until a nested Transition is completed before closing.
* @default false
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/Slider/SliderValueLabel.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export interface SliderValueLabelProps {
children?: React.ReactElement<any>;
children?: React.JSX.Element;
className?: string;
style?: React.CSSProperties;
/**
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/Unstable_TrapFocus/FocusTrap.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export interface FocusTrapProps {
/**
* A single child content element.
*/
children: React.ReactElement<any>;
children: React.JSX.Element;
/**
* If `true`, the focus trap will not automatically shift focus to itself when it opens, and
* replace it to the last focused element when it closes.
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-styles/src/ServerStyleSheets/ServerStyleSheets.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Member

Choose a reason for hiding this comment

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

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

Copy link
Contributor Author

@sai6855 sai6855 Nov 26, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

fixed here 451e23d and 188a956

}

export default ServerStyleSheets;
2 changes: 1 addition & 1 deletion packages/mui-styles/test/styles.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,7 @@ withStyles((theme) =>
});

interface ListItemContentProps extends WithStyles<typeof styles> {
children?: React.ReactElement<any>;
children?: React.ReactElement<unknown>;
inset?: boolean;
row?: boolean;
}
Expand Down