[material-ui][Autocomplete] Fix more React 18.3 key spread warnings i…

…n demos (#42639) Signed-off-by: wbt <wbt@users.noreply.github.com> Co-authored-by: Aarón García Hervás <aaron@mui.com>
mui · Jun 26, 2024 · 599abae · 599abae
1 parent 625a136
commit 599abae
Show file tree

Hide file tree

Showing 21 changed files with 274 additions and 185 deletions.
diff --git a/docs/data/material/components/autocomplete/CheckboxesTags.js b/docs/data/material/components/autocomplete/CheckboxesTags.js
@@ -16,17 +16,20 @@ export default function CheckboxesTags() {
       options={top100Films}
       disableCloseOnSelect
       getOptionLabel={(option) => option.title}
-      renderOption={(props, option, { selected }) => (
-        <li {...props}>
-          <Checkbox
-            icon={icon}
-            checkedIcon={checkedIcon}
-            style={{ marginRight: 8 }}
-            checked={selected}
-          />
-          {option.title}
-        </li>
-      )}
+      renderOption={(props, option, { selected }) => {
+        const { key, ...optionProps } = props;
+        return (
+          <li key={key} {...optionProps}>
+            <Checkbox
+              icon={icon}
+              checkedIcon={checkedIcon}
+              style={{ marginRight: 8 }}
+              checked={selected}
+            />
+            {option.title}
+          </li>
+        );
+      }}
       style={{ width: 500 }}
       renderInput={(params) => (
         <TextField {...params} label="Checkboxes" placeholder="Favorites" />

diff --git a/docs/data/material/components/autocomplete/CheckboxesTags.tsx b/docs/data/material/components/autocomplete/CheckboxesTags.tsx
@@ -16,17 +16,20 @@ export default function CheckboxesTags() {
       options={top100Films}
       disableCloseOnSelect
       getOptionLabel={(option) => option.title}
-      renderOption={(props, option, { selected }) => (
-        <li {...props}>
-          <Checkbox
-            icon={icon}
-            checkedIcon={checkedIcon}
-            style={{ marginRight: 8 }}
-            checked={selected}
-          />
-          {option.title}
-        </li>
-      )}
+      renderOption={(props, option, { selected }) => {
+        const { key, ...optionProps } = props;
+        return (
+          <li key={key} {...optionProps}>
+            <Checkbox
+              icon={icon}
+              checkedIcon={checkedIcon}
+              style={{ marginRight: 8 }}
+              checked={selected}
+            />
+            {option.title}
+          </li>
+        );
+      }}
       style={{ width: 500 }}
       renderInput={(params) => (
         <TextField {...params} label="Checkboxes" placeholder="Favorites" />

diff --git a/docs/data/material/components/autocomplete/CountrySelect.js b/docs/data/material/components/autocomplete/CountrySelect.js
@@ -11,18 +11,26 @@ export default function CountrySelect() {
       options={countries}
       autoHighlight
       getOptionLabel={(option) => option.label}
-      renderOption={(props, option) => (
-        <Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
-          <img
-            loading="lazy"
-            width="20"
-            srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
-            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
-            alt=""
-          />
-          {option.label} ({option.code}) +{option.phone}
-        </Box>
-      )}
+      renderOption={(props, option) => {
+        const { key, ...optionProps } = props;
+        return (
+          <Box
+            key={key}
+            component="li"
+            sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+            {...optionProps}
+          >
+            <img
+              loading="lazy"
+              width="20"
+              srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
+              alt=""
+            />
+            {option.label} ({option.code}) +{option.phone}
+          </Box>
+        );
+      }}
       renderInput={(params) => (
         <TextField
           {...params}

diff --git a/docs/data/material/components/autocomplete/CountrySelect.tsx b/docs/data/material/components/autocomplete/CountrySelect.tsx
@@ -11,18 +11,26 @@ export default function CountrySelect() {
       options={countries}
       autoHighlight
       getOptionLabel={(option) => option.label}
-      renderOption={(props, option) => (
-        <Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
-          <img
-            loading="lazy"
-            width="20"
-            srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
-            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
-            alt=""
-          />
-          {option.label} ({option.code}) +{option.phone}
-        </Box>
-      )}
+      renderOption={(props, option) => {
+        const { key, ...optionProps } = props;
+        return (
+          <Box
+            key={key}
+            component="li"
+            sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+            {...optionProps}
+          >
+            <img
+              loading="lazy"
+              width="20"
+              srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
+              alt=""
+            />
+            {option.label} ({option.code}) +{option.phone}
+          </Box>
+        );
+      }}
       renderInput={(params) => (
         <TextField
           {...params}

diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOption.js b/docs/data/material/components/autocomplete/FreeSoloCreateOption.js
@@ -56,7 +56,14 @@ export default function FreeSoloCreateOption() {
         // Regular option
         return option.title;
       }}
-      renderOption={(props, option) => <li {...props}>{option.title}</li>}
+      renderOption={(props, option) => {
+        const { key, ...optionProps } = props;
+        return (
+          <li key={key} {...optionProps}>
+            {option.title}
+          </li>
+        );
+      }}
       sx={{ width: 300 }}
       freeSolo
       renderInput={(params) => (

diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOption.tsx b/docs/data/material/components/autocomplete/FreeSoloCreateOption.tsx
@@ -56,7 +56,14 @@ export default function FreeSoloCreateOption() {
         // Regular option
         return option.title;
       }}
-      renderOption={(props, option) => <li {...props}>{option.title}</li>}
+      renderOption={(props, option) => {
+        const { key, ...optionProps } = props;
+        return (
+          <li key={key} {...optionProps}>
+            {option.title}
+          </li>
+        );
+      }}
       sx={{ width: 300 }}
       freeSolo
       renderInput={(params) => (

diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js
@@ -87,7 +87,14 @@ export default function FreeSoloCreateOptionDialog() {
         selectOnFocus
         clearOnBlur
         handleHomeEndKeys
-        renderOption={(props, option) => <li {...props}>{option.title}</li>}
+        renderOption={(props, option) => {
+          const { key, ...optionProps } = props;
+          return (
+            <li key={key} {...optionProps}>
+              {option.title}
+            </li>
+          );
+        }}
         sx={{ width: 300 }}
         freeSolo
         renderInput={(params) => <TextField {...params} label="Free solo dialog" />}

diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx
@@ -87,7 +87,14 @@ export default function FreeSoloCreateOptionDialog() {
         selectOnFocus
         clearOnBlur
         handleHomeEndKeys
-        renderOption={(props, option) => <li {...props}>{option.title}</li>}
+        renderOption={(props, option) => {
+          const { key, ...optionProps } = props;
+          return (
+            <li key={key} {...optionProps}>
+              {option.title}
+            </li>
+          );
+        }}
         sx={{ width: 300 }}
         freeSolo
         renderInput={(params) => <TextField {...params} label="Free solo dialog" />}

diff --git a/docs/data/material/components/autocomplete/GitHubLabel.js b/docs/data/material/components/autocomplete/GitHubLabel.js
@@ -195,49 +195,54 @@ export default function GitHubLabel() {
               PopperComponent={PopperComponent}
               renderTags={() => null}
               noOptionsText="No labels"
-              renderOption={(props, option, { selected }) => (
-                <li {...props}>
-                  <Box
-                    component={DoneIcon}
-                    sx={{ width: 17, height: 17, mr: '5px', ml: '-2px' }}
-                    style={{
-                      visibility: selected ? 'visible' : 'hidden',
-                    }}
-                  />
-                  <Box
-                    component="span"
-                    sx={{
-                      width: 14,
-                      height: 14,
-                      flexShrink: 0,
-                      borderRadius: '3px',
-                      mr: 1,
-                      mt: '2px',
-                    }}
-                    style={{ backgroundColor: option.color }}
-                  />
-                  <Box
-                    sx={{
-                      flexGrow: 1,
-                      '& span': {
-                        color:
-                          theme.palette.mode === 'light' ? '#586069' : '#8b949e',
-                      },
-                    }}
-                  >
-                    {option.name}
-                    <br />
-                    <span>{option.description}</span>
-                  </Box>
-                  <Box
-                    component={CloseIcon}
-                    sx={{ opacity: 0.6, width: 18, height: 18 }}
-                    style={{
-                      visibility: selected ? 'visible' : 'hidden',
-                    }}
-                  />
-                </li>
-              )}
+              renderOption={(props, option, { selected }) => {
+                const { key, ...optionProps } = props;
+                return (
+                  <li key={key} {...optionProps}>
+                    <Box
+                      component={DoneIcon}
+                      sx={{ width: 17, height: 17, mr: '5px', ml: '-2px' }}
+                      style={{
+                        visibility: selected ? 'visible' : 'hidden',
+                      }}
+                    />
+                    <Box
+                      component="span"
+                      sx={{
+                        width: 14,
+                        height: 14,
+                        flexShrink: 0,
+                        borderRadius: '3px',
+                        mr: 1,
+                        mt: '2px',
+                      }}
+                      style={{ backgroundColor: option.color }}
+                    />
+                    <Box
+                      sx={(t) => ({
+                        flexGrow: 1,
+                        '& span': {
+                          color: '#8b949e',
+                          ...t.applyStyles('light', {
+                            color: '#586069',
+                          }),
+                        },
+                      })}
+                    >
+                      {option.name}
+                      <br />
+                      <span>{option.description}</span>
+                    </Box>
+                    <Box
+                      component={CloseIcon}
+                      sx={{ opacity: 0.6, width: 18, height: 18 }}
+                      style={{
+                        visibility: selected ? 'visible' : 'hidden',
+                      }}
+                    />
+                  </li>
+                );
+              }}
               options={[...labels].sort((a, b) => {
                 // Display the selected labels first.
                 let ai = value.indexOf(a);