Upgrade to MUI v7#1241
Conversation
|
Warning Review limit reached
Next review available in: 27 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (14)
📝 WalkthroughWalkthroughChangesMUI 7 migration
Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
# Conflicts: # src/components/composite/agGridTable/BottomTableButtons.tsx
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/ui/reactHookForm/text/ExpandingTextField.tsx (1)
55-63: 🎯 Functional Correctness | 🔴 Critical | ⚡ Quick winMigrate
InputPropstoslotProps.
InputPropswas deprecated in MUI v6 and has been completely removed in MUI v7. Leaving this property intact will causeTextFieldto silently ignore thetextOverflowstyling and thedata-testid.Merge these configurations into the existing
slotPropsobject below, usingslotProps.inputandslotProps.htmlInput.🐛 Proposed fix
- InputProps: { - style: { - textOverflow: 'ellipsis', - overflow: 'hidden', // disable scrolling - whiteSpace: 'pre', - resize: 'none', // or 'horizontal' for horizontal resizing - }, - inputProps: { 'data-testid': 'DescriptionInputField' }, - }, helperText: <Typography variant="caption">{descriptionCounter}</Typography>, slotProps: { + input: { + style: { + textOverflow: 'ellipsis', + overflow: 'hidden', // disable scrolling + whiteSpace: 'pre', + resize: 'none', // or 'horizontal' for horizontal resizing + }, + }, + htmlInput: { + 'data-testid': 'DescriptionInputField', + }, formHelperText: { sx: {🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/ui/reactHookForm/text/ExpandingTextField.tsx` around lines 55 - 63, Update the TextField configuration in ExpandingTextField to remove deprecated InputProps and merge its styling into the existing slotProps.input object. Move the data-testid configuration to slotProps.htmlInput, preserving all current style values and the DescriptionInputField test identifier.
🧹 Nitpick comments (1)
src/components/ui/reactHookForm/tableInputs/table-numerical-input.tsx (1)
119-132: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse
slotProps.htmlInputfor native input attributes.Nesting
inputProps: { ... }insideslotProps.inputapplies those attributes to the underlyingInputBasewrapper, where theinputPropsprop is also deprecated in MUI v7. The recommended approach for setting native HTML element attributes (such asstyle,inputMode,pattern, ordata-testid) on aTextFieldis to use the top-levelslotProps.htmlInputslot instead.
src/components/ui/reactHookForm/tableInputs/table-numerical-input.tsx#L119-L132: Move thisinputPropsblock toslotProps.htmlInput.src/components/ui/reactHookForm/tableInputs/table-text-input.tsx#L45-L50: Move thisinputPropsblock toslotProps.htmlInput.src/components/ui/reactHookForm/text/UniqueNameInput.tsx#L105-L107: Move thisinputPropsblock toslotProps.htmlInput.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/ui/reactHookForm/tableInputs/table-numerical-input.tsx` around lines 119 - 132, Native input attributes are incorrectly nested under the deprecated inputProps within slotProps.input. In src/components/ui/reactHookForm/tableInputs/table-numerical-input.tsx lines 119-132, src/components/ui/reactHookForm/tableInputs/table-text-input.tsx lines 45-50, and src/components/ui/reactHookForm/text/UniqueNameInput.tsx lines 105-107, move each inputProps block to the top-level slotProps.htmlInput while preserving all existing attributes and behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@demo/src/equipment-search.tsx`:
- Around line 85-90: Update the Autocomplete input adornment in
demo/src/equipment-search.tsx#L85-L90 and demo/src/inline-search.tsx#L63-L68 to
retain params.InputProps.startAdornment while adding the Search icon, wrapping
the icon in MUI’s InputAdornment for correct spacing. Import InputAdornment from
`@mui/material` in both files as needed.
In `@src/components/ui/reactHookForm/tableInputs/table-numerical-input.tsx`:
- Around line 99-134: Deep-merge caller slotProps with each component’s local
slot configuration instead of allowing the local slotProps object to overwrite
it. Update
src/components/ui/reactHookForm/tableInputs/table-numerical-input.tsx:99-134 and
table-text-input.tsx:40-52 to preserve caller slotProps while merging local
input settings; update
src/components/ui/reactHookForm/text/ExpandingTextField.tsx:65-75 for
formHelperText, UniqueNameInput.tsx:101-109 for input, and
utils/TextFieldWithAdornment.tsx:88-95 for input, preserving nested htmlInput
and other caller-provided slots.
In `@src/features/parameters/dynamic-simulation/curve/common/grid-search.tsx`:
- Around line 68-78: Update the input slot configuration in the relevant
component so styles.searchSection is assigned directly to the slot’s sx
property, removing the nested input selector. Preserve the existing
startAdornment and disabled-dependent Search icon behavior.
---
Outside diff comments:
In `@src/components/ui/reactHookForm/text/ExpandingTextField.tsx`:
- Around line 55-63: Update the TextField configuration in ExpandingTextField to
remove deprecated InputProps and merge its styling into the existing
slotProps.input object. Move the data-testid configuration to
slotProps.htmlInput, preserving all current style values and the
DescriptionInputField test identifier.
---
Nitpick comments:
In `@src/components/ui/reactHookForm/tableInputs/table-numerical-input.tsx`:
- Around line 119-132: Native input attributes are incorrectly nested under the
deprecated inputProps within slotProps.input. In
src/components/ui/reactHookForm/tableInputs/table-numerical-input.tsx lines
119-132, src/components/ui/reactHookForm/tableInputs/table-text-input.tsx lines
45-50, and src/components/ui/reactHookForm/text/UniqueNameInput.tsx lines
105-107, move each inputProps block to the top-level slotProps.htmlInput while
preserving all existing attributes and behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: c8b20535-ef5e-48f2-861f-ae7e88efd9e9
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (34)
demo/src/equipment-search.tsxdemo/src/inline-search.tsxpackage.jsonsrc/components/composite/agGridTable/BottomTableButtons.tsxsrc/components/composite/customAGGrid/custom-aggrid-filters/custom-aggrid-text-filter.tsxsrc/components/composite/filter/explicitNaming/ExplicitNamingFilterForm.tsxsrc/components/composite/flatParameters/FlatParameters.tsxsrc/components/composite/report/QuickSearch.tsxsrc/components/ui/inputs/SelectClearable.tsxsrc/components/ui/reactHookForm/CheckboxNullableInput.tsxsrc/components/ui/reactHookForm/autocompleteInputs/AutocompleteInput.tsxsrc/components/ui/reactHookForm/chip-items-input.tsxsrc/components/ui/reactHookForm/readOnly/ButtonReadOnlyInput.tsxsrc/components/ui/reactHookForm/readOnly/ReadOnlyInput.tsxsrc/components/ui/reactHookForm/tableInputs/table-numerical-input.tsxsrc/components/ui/reactHookForm/tableInputs/table-text-input.tsxsrc/components/ui/reactHookForm/text/ExpandingTextField.tsxsrc/components/ui/reactHookForm/text/UniqueNameInput.tsxsrc/components/ui/reactHookForm/utils/TextFieldWithAdornment.tsxsrc/features/network-modification-table/renderers/name-cell.tsxsrc/features/network-modifications/battery/modification/BatteryDialogHeader.tsxsrc/features/network-modifications/battery/modification/BatteryDialogTabs.tsxsrc/features/network-modifications/generator/modification/GeneratorDialogHeader.tsxsrc/features/network-modifications/generator/modification/GeneratorDialogTabs.tsxsrc/features/network-modifications/load/common/LoadDialogHeader.tsxsrc/features/network-modifications/load/common/LoadDialogTabs.tsxsrc/features/network-modifications/substation/modification/SubstationModificationForm.tsxsrc/features/network-modifications/voltageLevel/creation/VoltageLevelCreationForm.tsxsrc/features/network-modifications/voltageLevel/modification/VoltageLevelModificationForm.tsxsrc/features/parameters/common/parameters.tsxsrc/features/parameters/dynamic-simulation/curve/common/grid-search.tsxsrc/features/parameters/voltage-init/voltage-init-parameters-form.tsxsrc/features/topBar/AboutDialog.tsxsrc/features/topBar/UserSettingsDialog.tsx
💤 Files with no reviewable changes (1)
- src/features/network-modification-table/renderers/name-cell.tsx
🚧 Files skipped from review as they are similar to previous changes (9)
- src/features/network-modifications/substation/modification/SubstationModificationForm.tsx
- src/features/network-modifications/voltageLevel/creation/VoltageLevelCreationForm.tsx
- src/features/network-modifications/battery/modification/BatteryDialogHeader.tsx
- src/features/topBar/AboutDialog.tsx
- src/components/composite/filter/explicitNaming/ExplicitNamingFilterForm.tsx
- src/features/parameters/voltage-init/voltage-init-parameters-form.tsx
- src/components/composite/flatParameters/FlatParameters.tsx
- package.json
- src/components/composite/agGridTable/BottomTableButtons.tsx
| slotProps={{ | ||
| input: { | ||
| ...params.InputProps, | ||
| startAdornment: <Search color="disabled" />, | ||
| }, | ||
| }} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Preserve params.InputProps.startAdornment and wrap the icon in InputAdornment.
Overriding startAdornment entirely will drop any tags or elements that Autocomplete might place there. Additionally, providing a raw <Search /> icon instead of wrapping it in <InputAdornment> can lead to misalignment in the input field.
Apply this fix to both sites to preserve Autocomplete's adornments and correct the layout spacing (ensure InputAdornment is imported from @mui/material):
demo/src/equipment-search.tsx#L85-L90: Use the proposed fix below.demo/src/inline-search.tsx#L63-L68: Use the proposed fix below.
♻️ Proposed fix
slotProps={{
input: {
...params.InputProps,
- startAdornment: <Search color="disabled" />,
+ startAdornment: (
+ <>
+ <InputAdornment position="start">
+ <Search color="disabled" />
+ </InputAdornment>
+ {params.InputProps.startAdornment}
+ </>
+ ),
},
}}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| slotProps={{ | |
| input: { | |
| ...params.InputProps, | |
| startAdornment: <Search color="disabled" />, | |
| }, | |
| }} | |
| slotProps={{ | |
| input: { | |
| ...params.InputProps, | |
| startAdornment: ( | |
| <> | |
| <InputAdornment position="start"> | |
| <Search color="disabled" /> | |
| </InputAdornment> | |
| {params.InputProps.startAdornment} | |
| </> | |
| ), | |
| }, | |
| }} |
📍 Affects 2 files
demo/src/equipment-search.tsx#L85-L90(this comment)demo/src/inline-search.tsx#L63-L68
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@demo/src/equipment-search.tsx` around lines 85 - 90, Update the Autocomplete
input adornment in demo/src/equipment-search.tsx#L85-L90 and
demo/src/inline-search.tsx#L63-L68 to retain params.InputProps.startAdornment
while adding the Search icon, wrapping the icon in MUI’s InputAdornment for
correct spacing. Import InputAdornment from `@mui/material` in both files as
needed.
| {...(hideErrorMessage ? {} : genHelperError(error?.message))} | ||
| {...props} | ||
| slotProps={{ | ||
| input: { | ||
| endAdornment: ( | ||
| <InputAdornment position="end"> | ||
| {transformedValue && adornment?.text} | ||
| {clearable && ( | ||
| <IconButton | ||
| onClick={handleClearValue} | ||
| style={{ | ||
| visibility: clearable ? 'visible' : 'hidden', | ||
| }} | ||
| > | ||
| <ClearIcon /> | ||
| </IconButton> | ||
| )} | ||
| </InputAdornment> | ||
| ), | ||
| disableInjectingGlobalStyles: true, // disable auto-fill animations and increase rendering perf | ||
| inputProps: { | ||
| style: { | ||
| fontSize: 'small', | ||
| color: | ||
| previousValue !== undefined && previousValue === parseFloat(value) && !valueModified | ||
| ? 'grey' | ||
| : undefined, // grey out the value if it is the same as the previous one | ||
| textAlign: style?.textAlign ?? 'left', | ||
| }, | ||
| inputMode: 'numeric', | ||
| pattern: '[0-9]*', | ||
| lang: 'en-US', // to have '.' as decimal separator | ||
| ...inputProps, | ||
| }, | ||
| inputMode: 'numeric', | ||
| pattern: '[0-9]*', | ||
| lang: 'en-US', // to have '.' as decimal separator | ||
| ...inputProps, | ||
| }, | ||
| }} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
Deep merge slotProps to prevent shallow overwrites.
Because MUI v7 nests all slot configurations (such as input, htmlInput, and formHelperText) under the single slotProps object, shallow spreading caller props (...props or ...formProps) on the same component where a local slotProps object is defined creates a collision. If a caller provides slotProps (e.g., to set maxLength via htmlInput), one of the slotProps objects will be completely overwritten and silently dropped.
Update the configuration to safely merge the caller's slotProps with the component's internal slotProps.
src/components/ui/reactHookForm/tableInputs/table-numerical-input.tsx#L99-L134: Mergeprops.slotPropswith the localslotProps.inputconfiguration.src/components/ui/reactHookForm/tableInputs/table-text-input.tsx#L40-L52: Mergeprops.slotPropswith the localslotProps.inputconfiguration.src/components/ui/reactHookForm/text/ExpandingTextField.tsx#L65-L75: MergetextFieldFormProps.slotPropswith the localslotProps.formHelperTextconfiguration.src/components/ui/reactHookForm/text/UniqueNameInput.tsx#L101-L109: MergeformProps.slotPropswith the localslotProps.inputconfiguration.src/components/ui/reactHookForm/utils/TextFieldWithAdornment.tsx#L88-L95: MergeotherProps.slotPropswith the localslotProps.inputconfiguration.
Example of a safe merge pattern:
slotProps={{
...props.slotProps,
input: {
...props.slotProps?.input,
// ... local input properties
},
htmlInput: {
...props.slotProps?.htmlInput,
// ... local htmlInput properties
}
}}📍 Affects 5 files
src/components/ui/reactHookForm/tableInputs/table-numerical-input.tsx#L99-L134(this comment)src/components/ui/reactHookForm/tableInputs/table-text-input.tsx#L40-L52src/components/ui/reactHookForm/text/ExpandingTextField.tsx#L65-L75src/components/ui/reactHookForm/text/UniqueNameInput.tsx#L101-L109src/components/ui/reactHookForm/utils/TextFieldWithAdornment.tsx#L88-L95
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/ui/reactHookForm/tableInputs/table-numerical-input.tsx` around
lines 99 - 134, Deep-merge caller slotProps with each component’s local slot
configuration instead of allowing the local slotProps object to overwrite it.
Update
src/components/ui/reactHookForm/tableInputs/table-numerical-input.tsx:99-134 and
table-text-input.tsx:40-52 to preserve caller slotProps while merging local
input settings; update
src/components/ui/reactHookForm/text/ExpandingTextField.tsx:65-75 for
formHelperText, UniqueNameInput.tsx:101-109 for input, and
utils/TextFieldWithAdornment.tsx:88-95 for input, preserving nested htmlInput
and other caller-provided slots.
| slotProps={{ | ||
| input: { | ||
| sx: { | ||
| input: styles.searchSection, | ||
| }, | ||
| startAdornment: ( | ||
| <InputAdornment position="start"> | ||
| <Search color={disabled ? 'disabled' : 'inherit'} /> | ||
| </InputAdornment> | ||
| ), | ||
| }, |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Apply sx directly to the input wrapper slot.
Nesting the styling under an input CSS selector (sx: { input: styles.searchSection }) targets the inner HTML <input> element instead of the wrapper component. Because <input> is not a flex container, properties like alignItems: 'center' from styles.searchSection will have no effect.
Apply the style object directly to the slot's sx prop.
🎨 Proposed fix
slotProps={{
input: {
- sx: {
- input: styles.searchSection,
- },
+ sx: styles.searchSection,
startAdornment: (
<InputAdornment position="start">
<Search color={disabled ? 'disabled' : 'inherit'} />
</InputAdornment>
),📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| slotProps={{ | |
| input: { | |
| sx: { | |
| input: styles.searchSection, | |
| }, | |
| startAdornment: ( | |
| <InputAdornment position="start"> | |
| <Search color={disabled ? 'disabled' : 'inherit'} /> | |
| </InputAdornment> | |
| ), | |
| }, | |
| slotProps={{ | |
| input: { | |
| sx: styles.searchSection, | |
| startAdornment: ( | |
| <InputAdornment position="start"> | |
| <Search color={disabled ? 'disabled' : 'inherit'} /> | |
| </InputAdornment> | |
| ), | |
| }, |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/features/parameters/dynamic-simulation/curve/common/grid-search.tsx`
around lines 68 - 78, Update the input slot configuration in the relevant
component so styles.searchSection is assigned directly to the slot’s sx
property, removing the nested input selector. Preserve the existing
startAdornment and disabled-dependent Search icon behavior.
1 participant
PR Summary