[material-ui][TextField] Deprecate *Props props (#42062)

mui · May 20, 2024 · 70041ad · 70041ad
1 parent 5390071
commit 70041ad
Show file tree

Hide file tree

Showing 46 changed files with 771 additions and 196 deletions.
diff --git a/docs/data/material/components/autocomplete/Asynchronous.js b/docs/data/material/components/autocomplete/Asynchronous.js
@@ -60,14 +60,16 @@ export default function Asynchronous() {
         <TextField
           {...params}
           label="Asynchronous"
-          InputProps={{
-            ...params.InputProps,
-            endAdornment: (
-              <React.Fragment>
-                {loading ? <CircularProgress color="inherit" size={20} /> : null}
-                {params.InputProps.endAdornment}
-              </React.Fragment>
-            ),
+          slotProps={{
+            input: {
+              ...params.InputProps,
+              endAdornment: (
+                <React.Fragment>
+                  {loading ? <CircularProgress color="inherit" size={20} /> : null}
+                  {params.InputProps.endAdornment}
+                </React.Fragment>
+              ),
+            },
           }}
         />
       )}

diff --git a/docs/data/material/components/autocomplete/Asynchronous.tsx b/docs/data/material/components/autocomplete/Asynchronous.tsx
@@ -65,14 +65,16 @@ export default function Asynchronous() {
         <TextField
           {...params}
           label="Asynchronous"
-          InputProps={{
-            ...params.InputProps,
-            endAdornment: (
-              <React.Fragment>
-                {loading ? <CircularProgress color="inherit" size={20} /> : null}
-                {params.InputProps.endAdornment}
-              </React.Fragment>
-            ),
+          slotProps={{
+            input: {
+              ...params.InputProps,
+              endAdornment: (
+                <React.Fragment>
+                  {loading ? <CircularProgress color="inherit" size={20} /> : null}
+                  {params.InputProps.endAdornment}
+                </React.Fragment>
+              ),
+            },
           }}
         />
       )}

diff --git a/docs/data/material/components/autocomplete/CountrySelect.js b/docs/data/material/components/autocomplete/CountrySelect.js
@@ -27,9 +27,11 @@ export default function CountrySelect() {
         <TextField
           {...params}
           label="Choose a country"
-          inputProps={{
-            ...params.inputProps,
-            autoComplete: 'new-password', // disable autocomplete and autofill
+          slotProps={{
+            htmlInput: {
+              ...params.inputProps,
+              autoComplete: 'new-password', // disable autocomplete and autofill
+            },
           }}
         />
       )}

diff --git a/docs/data/material/components/autocomplete/CountrySelect.tsx b/docs/data/material/components/autocomplete/CountrySelect.tsx
@@ -27,9 +27,11 @@ export default function CountrySelect() {
         <TextField
           {...params}
           label="Choose a country"
-          inputProps={{
-            ...params.inputProps,
-            autoComplete: 'new-password', // disable autocomplete and autofill
+          slotProps={{
+            htmlInput: {
+              ...params.inputProps,
+              autoComplete: 'new-password', // disable autocomplete and autofill
+            },
           }}
         />
       )}

diff --git a/docs/data/material/components/autocomplete/FreeSolo.js b/docs/data/material/components/autocomplete/FreeSolo.js
@@ -21,9 +21,11 @@ export default function FreeSolo() {
           <TextField
             {...params}
             label="Search input"
-            InputProps={{
-              ...params.InputProps,
-              type: 'search',
+            slotProps={{
+              input: {
+                ...params.InputProps,
+                type: 'search',
+              },
             }}
           />
         )}

diff --git a/docs/data/material/components/autocomplete/FreeSolo.tsx b/docs/data/material/components/autocomplete/FreeSolo.tsx
@@ -21,9 +21,11 @@ export default function FreeSolo() {
           <TextField
             {...params}
             label="Search input"
-            InputProps={{
-              ...params.InputProps,
-              type: 'search',
+            slotProps={{
+              input: {
+                ...params.InputProps,
+                type: 'search',
+              },
             }}
           />
         )}

diff --git a/docs/data/material/components/popper/ScrollPlayground.js b/docs/data/material/components/popper/ScrollPlayground.js
@@ -275,20 +275,23 @@ export default function ScrollPlayground() {
               sx={{ width: 200 }}
               label="Placement"
               select
-              InputLabelProps={{
-                id: 'scroll-playground-placement-label',
-              }}
-              SelectProps={{
-                native: true,
-                inputProps: {
-                  'aria-labelledby': 'scroll-playground-placement-label',
-                },
-              }}
               value={placement}
               onChange={(event) => {
                 setPlacement(event.target.value);
               }}
               variant="standard"
+              slotProps={{
+                select: {
+                  native: true,
+                  inputProps: {
+                    'aria-labelledby': 'scroll-playground-placement-label',
+                  },
+                },
+
+                inputLabel: {
+                  id: 'scroll-playground-placement-label',
+                },
+              }}
             >
               <option value="top-start">top-start</option>
               <option value="top">top</option>
@@ -396,16 +399,6 @@ export default function ScrollPlayground() {
                 size="small"
                 label="Root Boundary"
                 select
-                InputLabelProps={{
-                  id: 'scroll-playground-prevent-overflow-root-boundary',
-                }}
-                SelectProps={{
-                  native: true,
-                  inputProps: {
-                    'aria-labelledby':
-                      'scroll-playground-prevent-overflow-root-boundary',
-                  },
-                }}
                 value={preventOverflow.rootBoundary}
                 onChange={(event) => {
                   setPreventOverflow((old) => ({
@@ -414,6 +407,19 @@ export default function ScrollPlayground() {
                   }));
                 }}
                 variant="standard"
+                slotProps={{
+                  select: {
+                    native: true,
+                    inputProps: {
+                      'aria-labelledby':
+                        'scroll-playground-prevent-overflow-root-boundary',
+                    },
+                  },
+
+                  inputLabel: {
+                    id: 'scroll-playground-prevent-overflow-root-boundary',
+                  },
+                }}
               >
                 <option value="document">document</option>
                 <option value="viewport">viewport</option>
@@ -458,15 +464,6 @@ export default function ScrollPlayground() {
                 size="small"
                 label="Root Boundary"
                 select
-                InputLabelProps={{
-                  id: 'scroll-playground-flip-root-boundary',
-                }}
-                SelectProps={{
-                  native: true,
-                  inputProps: {
-                    'aria-labelledby': 'scroll-playground-flip-root-boundary',
-                  },
-                }}
                 value={flip.rootBoundary}
                 onChange={(event) => {
                   setFlip((old) => ({
@@ -475,6 +472,18 @@ export default function ScrollPlayground() {
                   }));
                 }}
                 variant="standard"
+                slotProps={{
+                  select: {
+                    native: true,
+                    inputProps: {
+                      'aria-labelledby': 'scroll-playground-flip-root-boundary',
+                    },
+                  },
+
+                  inputLabel: {
+                    id: 'scroll-playground-flip-root-boundary',
+                  },
+                }}
               >
                 <option value="document">document</option>
                 <option value="viewport">viewport</option>

diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyled.js b/docs/data/material/components/text-fields/CustomizedInputsStyled.js
@@ -65,7 +65,12 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({
 }));
 
 const RedditTextField = styled((props) => (
-  <TextField InputProps={{ disableUnderline: true }} {...props} />
+  <TextField
+    slotProps={{
+      input: { disableUnderline: true },
+    }}
+    {...props}
+  />
 ))(({ theme }) => ({
   '& .MuiFilledInput-root': {
     overflow: 'hidden',

diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx b/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx
@@ -67,7 +67,9 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({
 
 const RedditTextField = styled((props: TextFieldProps) => (
   <TextField
-    InputProps={{ disableUnderline: true } as Partial<OutlinedInputProps>}
+    slotProps={{
+      input: { disableUnderline: true } as Partial<OutlinedInputProps>,
+    }}
     {...props}
   />
 ))(({ theme }) => ({

diff --git a/docs/data/material/components/text-fields/FormPropsTextFields.js b/docs/data/material/components/text-fields/FormPropsTextFields.js
@@ -35,16 +35,20 @@ export default function FormPropsTextFields() {
           id="outlined-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
+          slotProps={{
+            input: {
+              readOnly: true,
+            },
           }}
         />
         <TextField
           id="outlined-number"
           label="Number"
           type="number"
-          InputLabelProps={{
-            shrink: true,
+          slotProps={{
+            inputLabel: {
+              shrink: true,
+            },
           }}
         />
         <TextField id="outlined-search" label="Search field" type="search" />
@@ -81,19 +85,23 @@ export default function FormPropsTextFields() {
           id="filled-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
-          }}
           variant="filled"
+          slotProps={{
+            input: {
+              readOnly: true,
+            },
+          }}
         />
         <TextField
           id="filled-number"
           label="Number"
           type="number"
-          InputLabelProps={{
-            shrink: true,
-          }}
           variant="filled"
+          slotProps={{
+            inputLabel: {
+              shrink: true,
+            },
+          }}
         />
         <TextField
           id="filled-search"
@@ -135,19 +143,23 @@ export default function FormPropsTextFields() {
           id="standard-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
-          }}
           variant="standard"
+          slotProps={{
+            input: {
+              readOnly: true,
+            },
+          }}
         />
         <TextField
           id="standard-number"
           label="Number"
           type="number"
-          InputLabelProps={{
-            shrink: true,
-          }}
           variant="standard"
+          slotProps={{
+            inputLabel: {
+              shrink: true,
+            },
+          }}
         />
         <TextField
           id="standard-search"