Missing demos update

mui · May 14, 2024 · 93e5b80 · 93e5b80
1 parent 8ddb172
commit 93e5b80
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 68 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/getting-started/templates/landing-page/components/Footer.js b/docs/data/material/getting-started/templates/landing-page/components/Footer.js
@@ -75,9 +75,11 @@ export default function Footer() {
                 fullWidth
                 aria-label="Enter your email address"
                 placeholder="Your email address"
-                inputProps={{
-                  autoComplete: 'off',
-                  'aria-label': 'Enter your email address',
+                slotProps={{
+                  htmlInput: {
+                    autoComplete: 'off',
+                    'aria-label': 'Enter your email address',
+                  },
                 }}
               />
               <Button variant="contained" color="primary" sx={{ flexShrink: 0 }}>

diff --git a/docs/data/material/getting-started/templates/landing-page/components/Footer.tsx b/docs/data/material/getting-started/templates/landing-page/components/Footer.tsx
@@ -75,9 +75,11 @@ export default function Footer() {
                 fullWidth
                 aria-label="Enter your email address"
                 placeholder="Your email address"
-                inputProps={{
-                  autoComplete: 'off',
-                  'aria-label': 'Enter your email address',
+                slotProps={{
+                  htmlInput: {
+                    autoComplete: 'off',
+                    'aria-label': 'Enter your email address',
+                  },
                 }}
               />
               <Button variant="contained" color="primary" sx={{ flexShrink: 0 }}>

diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.js b/docs/data/material/getting-started/templates/landing-page/components/Hero.js
@@ -113,9 +113,11 @@ export default function Hero() {
               variant="outlined"
               aria-label="Enter your email address"
               placeholder="Your email address"
-              inputProps={{
-                autoComplete: 'off',
-                'aria-label': 'Enter your email address',
+              slotProps={{
+                htmlInput: {
+                  autoComplete: 'off',
+                  'aria-label': 'Enter your email address',
+                },
               }}
             />
             <Button variant="contained" color="primary">

diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx b/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx
@@ -113,9 +113,11 @@ export default function Hero() {
               variant="outlined"
               aria-label="Enter your email address"
               placeholder="Your email address"
-              inputProps={{
-                autoComplete: 'off',
-                'aria-label': 'Enter your email address',
+              slotProps={{
+                htmlInput: {
+                  autoComplete: 'off',
+                  'aria-label': 'Enter your email address',
+                },
               }}
             />
             <Button variant="contained" color="primary">