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

Jump to bottom

[joy-ui] Fix issues reported by the React Compiler #42671

Merged
merged 4 commits into from
Jun 20, 2024
Merged

[joy-ui] Fix issues reported by the React Compiler #42671

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e554aa1
fixed react compiler issues for mui-joy
anuj18-kumar Jun 17, 2024
6cdcc14
prettier fixes
anuujj Jun 17, 2024
720b7dd
Merge branch 'next' of https://github.com/mui/material-ui into react-…
siriwatknp Jun 17, 2024
3d0a786
reverted code changes and added comments
anuujj Jun 19, 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
18 changes: 8 additions & 10 deletions packages/mui-joy/src/Checkbox/Checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,17 +244,15 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
const disabledProp = inProps.disabled ?? formControl?.disabled ?? disabledExternalProp;
const size = inProps.size ?? formControl?.size ?? sizeProp;

if (process.env.NODE_ENV !== 'production') {
const registerEffect = formControl?.registerEffect;
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useEffect(() => {
if (registerEffect) {
return registerEffect();
}
const registerEffect = formControl?.registerEffect;
aarongarciah marked this conversation as resolved.
Show resolved Hide resolved

return undefined;
}, [registerEffect]);
}
React.useEffect(() => {
if (process.env.NODE_ENV !== 'production' && registerEffect) {
return registerEffect();
}

return undefined;
}, [registerEffect]);

const id = useId(idOverride ?? formControl?.htmlFor);

Expand Down
3 changes: 1 addition & 2 deletions packages/mui-joy/src/FormControl/FormControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,9 +127,8 @@ const FormControl = React.forwardRef(function FormControl(inProps, ref) {
};

let registerEffect: undefined | (() => () => void);
const registeredInput = React.useRef(false);
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks
const registeredInput = React.useRef(false);
anuujj marked this conversation as resolved.
Show resolved Hide resolved
registerEffect = () => {
if (registeredInput.current) {
console.error(
Expand Down
18 changes: 8 additions & 10 deletions packages/mui-joy/src/Input/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,17 +269,15 @@ const Input = React.forwardRef(function Input(inProps, ref) {
...other
} = useForwardedInput<InputProps>({ ...props, disabledInProp: inProps.disabled }, inputClasses);

if (process.env.NODE_ENV !== 'production') {
const registerEffect = formControl?.registerEffect;
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useEffect(() => {
if (registerEffect) {
return registerEffect();
}
const registerEffect = formControl?.registerEffect;

return undefined;
}, [registerEffect]);
}
React.useEffect(() => {
if (process.env.NODE_ENV !== 'production' && registerEffect) {
return registerEffect();
}

return undefined;
}, [registerEffect]);

const error = inProps.error ?? formControl?.error ?? errorProp;
const size = inProps.size ?? formControl?.size ?? sizeProp;
Expand Down
18 changes: 8 additions & 10 deletions packages/mui-joy/src/Radio/Radio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,17 +278,15 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {

const formControl = React.useContext(FormControlContext);

if (process.env.NODE_ENV !== 'production') {
const registerEffect = formControl?.registerEffect;
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useEffect(() => {
if (registerEffect) {
return registerEffect();
}
const registerEffect = formControl?.registerEffect;

return undefined;
}, [registerEffect]);
}
React.useEffect(() => {
if (process.env.NODE_ENV !== 'production' && registerEffect) {
return registerEffect();
}

return undefined;
}, [registerEffect]);

const id = useId(idOverride ?? formControl?.htmlFor);
const radioGroup = React.useContext(RadioGroupContext);
Expand Down
18 changes: 8 additions & 10 deletions packages/mui-joy/src/RadioGroup/RadioGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,17 +108,15 @@ const RadioGroup = React.forwardRef(function RadioGroup(inProps, ref) {

const name = useId(nameProp);

if (process.env.NODE_ENV !== 'production') {
const registerEffect = formControl?.registerEffect;
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useEffect(() => {
if (registerEffect) {
return registerEffect();
}
const registerEffect = formControl?.registerEffect;

return undefined;
}, [registerEffect]);
}
React.useEffect(() => {
if (process.env.NODE_ENV !== 'production' && registerEffect) {
return registerEffect();
}

return undefined;
}, [registerEffect]);

const contextValue = React.useMemo(
() => ({
Expand Down
18 changes: 8 additions & 10 deletions packages/mui-joy/src/Select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,17 +373,15 @@ const Select = React.forwardRef(function Select<OptionValue extends {}, Multiple

const formControl = React.useContext(FormControlContext);

if (process.env.NODE_ENV !== 'production') {
const registerEffect = formControl?.registerEffect;
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useEffect(() => {
if (registerEffect) {
return registerEffect();
}
const registerEffect = formControl?.registerEffect;

return undefined;
}, [registerEffect]);
}
React.useEffect(() => {
if (process.env.NODE_ENV !== 'production' && registerEffect) {
return registerEffect();
}

return undefined;
}, [registerEffect]);

const disabledProp = inProps.disabled ?? formControl?.disabled ?? disabledExternalProp;
const size = inProps.size ?? formControl?.size ?? sizeProp;
Expand Down
20 changes: 9 additions & 11 deletions packages/mui-joy/src/Switch/Switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,18 +257,16 @@ const Switch = React.forwardRef(function Switch(inProps, ref) {

const formControl = React.useContext(FormControlContext);

if (process.env.NODE_ENV !== 'production') {
const registerEffect = formControl?.registerEffect;
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useEffect(() => {
if (registerEffect) {
return registerEffect();
}

return undefined;
}, [registerEffect]);
}
const registerEffect = formControl?.registerEffect;

React.useEffect(() => {
if (process.env.NODE_ENV !== 'production' && registerEffect) {
return registerEffect();
}

return undefined;
}, [registerEffect]);

const size = inProps.size ?? formControl?.size ?? sizeProp;
const color = inProps.color ?? (formControl?.error ? 'danger' : formControl?.color ?? colorProp);

Expand Down
18 changes: 8 additions & 10 deletions packages/mui-joy/src/Textarea/Textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,17 +239,15 @@ const Textarea = React.forwardRef(function Textarea(inProps, ref) {
...other
} = useForwardedInput<TextareaProps>(props, textareaClasses);

if (process.env.NODE_ENV !== 'production') {
const registerEffect = formControl?.registerEffect;
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useEffect(() => {
if (registerEffect) {
return registerEffect();
}
const registerEffect = formControl?.registerEffect;

return undefined;
}, [registerEffect]);
}
React.useEffect(() => {
if (process.env.NODE_ENV !== 'production' && registerEffect) {
return registerEffect();
}

return undefined;
}, [registerEffect]);

const disabled = inProps.disabled ?? formControl?.disabled ?? disabledProp;
const error = inProps.error ?? formControl?.error ?? errorProp;
Expand Down
8 changes: 6 additions & 2 deletions packages/mui-joy/src/styles/extendTheme.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,9 @@ describe('extendTheme', () => {

function Test() {
const theme = useTheme();
aarongarciah marked this conversation as resolved.
Show resolved Hide resolved
styles = theme.unstable_sx({ bgcolor: 'primary.500' });
React.useEffect(() => {
styles = theme.unstable_sx({ bgcolor: 'primary.500' });
}, [theme]);
return null;
}

Expand All @@ -261,7 +263,9 @@ describe('extendTheme', () => {

function Test() {
const theme = useTheme();
styles = theme.unstable_sx({ borderRadius: 'md' });
React.useEffect(()=>{
styles = theme.unstable_sx({ borderRadius: 'md' });
}, [theme]);
return null;
}

Expand Down
Loading