From ff61ec39586527ed8c24d0ff456f107186e51943 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 27 Jun 2024 12:24:57 -0400 Subject: [PATCH] [material-ui][Autocomplete] Fix more React 18.3 key spread warnings in demos (@wbt) (#42766) --- .../components/autocomplete/CheckboxesTags.js | 25 ++--- .../autocomplete/CheckboxesTags.tsx | 25 ++--- .../components/autocomplete/CountrySelect.js | 32 ++++--- .../components/autocomplete/CountrySelect.tsx | 32 ++++--- .../autocomplete/FreeSoloCreateOption.js | 9 +- .../autocomplete/FreeSoloCreateOption.tsx | 9 +- .../FreeSoloCreateOptionDialog.js | 9 +- .../FreeSoloCreateOptionDialog.tsx | 9 +- .../components/autocomplete/GitHubLabel.js | 91 ++++++++++--------- .../components/autocomplete/GitHubLabel.tsx | 91 ++++++++++--------- .../autocomplete/GloballyCustomizedOptions.js | 34 ++++--- .../GloballyCustomizedOptions.tsx | 34 ++++--- .../components/autocomplete/GoogleMaps.js | 6 +- .../components/autocomplete/GoogleMaps.tsx | 6 +- .../components/autocomplete/Highlights.js | 3 +- .../components/autocomplete/Highlights.tsx | 3 +- .../autocomplete/UseAutocomplete.js | 11 ++- .../autocomplete/UseAutocomplete.tsx | 11 ++- .../autocomplete/UseAutocomplete.tsx.preview | 11 ++- .../components/autocomplete/Virtualize.js | 4 +- .../components/autocomplete/Virtualize.tsx | 4 +- 21 files changed, 274 insertions(+), 185 deletions(-) diff --git a/docs/data/material/components/autocomplete/CheckboxesTags.js b/docs/data/material/components/autocomplete/CheckboxesTags.js index a07f37a4c05cd2..df72ec9733c6af 100644 --- 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 }) => ( -
  • - - {option.title} -
    • - )} + renderOption={(props, option, { selected }) => { + const { key, ...optionProps } = props; + return ( +
  • + + {option.title} +
    • + ); + }} style={{ width: 500 }} renderInput={(params) => ( diff --git a/docs/data/material/components/autocomplete/CheckboxesTags.tsx b/docs/data/material/components/autocomplete/CheckboxesTags.tsx index a07f37a4c05cd2..df72ec9733c6af 100644 --- 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 }) => ( -
  • - - {option.title} -
    • - )} + renderOption={(props, option, { selected }) => { + const { key, ...optionProps } = props; + return ( +
  • + + {option.title} +
    • + ); + }} style={{ width: 500 }} renderInput={(params) => ( diff --git a/docs/data/material/components/autocomplete/CountrySelect.js b/docs/data/material/components/autocomplete/CountrySelect.js index da2dfec88e27cd..9fff78db01b37d 100644 --- 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) => ( - img': { mr: 2, flexShrink: 0 } }} {...props}> - - {option.label} ({option.code}) +{option.phone} - - )} + renderOption={(props, option) => { + const { key, ...optionProps } = props; + return ( + img': { mr: 2, flexShrink: 0 } }} + {...optionProps} + > + + {option.label} ({option.code}) +{option.phone} + + ); + }} renderInput={(params) => ( option.label} - renderOption={(props, option) => ( - img': { mr: 2, flexShrink: 0 } }} {...props}> - - {option.label} ({option.code}) +{option.phone} - - )} + renderOption={(props, option) => { + const { key, ...optionProps } = props; + return ( + img': { mr: 2, flexShrink: 0 } }} + {...optionProps} + > + + {option.label} ({option.code}) +{option.phone} + + ); + }} renderInput={(params) => (
  • {option.title}
    • } + renderOption={(props, option) => { + const { key, ...optionProps } = props; + return ( +
  • + {option.title} +
    • + ); + }} sx={{ width: 300 }} freeSolo renderInput={(params) => ( diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOption.tsx b/docs/data/material/components/autocomplete/FreeSoloCreateOption.tsx index d95cb137a1614d..ff7e52523be26b 100644 --- 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) =>
  • {option.title}
    • } + renderOption={(props, option) => { + const { key, ...optionProps } = props; + return ( +
  • + {option.title} +
    • + ); + }} sx={{ width: 300 }} freeSolo renderInput={(params) => ( diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js index 22516f183d3bb1..ffccefc33aa8e1 100644 --- 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) =>
  • {option.title}
    • } + renderOption={(props, option) => { + const { key, ...optionProps } = props; + return ( +
  • + {option.title} +
    • + ); + }} sx={{ width: 300 }} freeSolo renderInput={(params) => } diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx index 779b26e26d6d17..5179e050b1dd73 100644 --- 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) =>
  • {option.title}
    • } + renderOption={(props, option) => { + const { key, ...optionProps } = props; + return ( +
  • + {option.title} +
    • + ); + }} sx={{ width: 300 }} freeSolo renderInput={(params) => } diff --git a/docs/data/material/components/autocomplete/GitHubLabel.js b/docs/data/material/components/autocomplete/GitHubLabel.js index 22396f95ee43b1..a60eb641491928 100644 --- 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 }) => ( -
  • - - - - {option.name} -
    - {option.description} -     - -
    • - )} + renderOption={(props, option, { selected }) => { + const { key, ...optionProps } = props; + return ( +
  • + + + ({ + flexGrow: 1, + '& span': { + color: '#8b949e', + ...t.applyStyles('light', { + color: '#586069', + }), + }, + })} + > + {option.name} +
    + {option.description} +     + +
    • + ); + }} options={[...labels].sort((a, b) => { // Display the selected labels first. let ai = value.indexOf(a); diff --git a/docs/data/material/components/autocomplete/GitHubLabel.tsx b/docs/data/material/components/autocomplete/GitHubLabel.tsx index 1b93212d7a0cb8..8f7b886df0b69e 100644 --- a/docs/data/material/components/autocomplete/GitHubLabel.tsx +++ b/docs/data/material/components/autocomplete/GitHubLabel.tsx @@ -201,49 +201,54 @@ export default function GitHubLabel() { PopperComponent={PopperComponent} renderTags={() => null} noOptionsText="No labels" - renderOption={(props, option, { selected }) => ( -
  • - - - - {option.name} -
    - {option.description} -     - -
    • - )} + renderOption={(props, option, { selected }) => { + const { key, ...optionProps } = props; + return ( +
  • + + + ({ + flexGrow: 1, + '& span': { + color: '#8b949e', + ...t.applyStyles('light', { + color: '#586069', + }), + }, + })} + > + {option.name} +
    + {option.description} +     + +
    • + ); + }} options={[...labels].sort((a, b) => { // Display the selected labels first. let ai = value.indexOf(a); diff --git a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js b/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js index d5f7669578cc79..8ff97dc971fe0f 100644 --- a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js +++ b/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js @@ -14,21 +14,25 @@ const customTheme = (outerTheme) => components: { MuiAutocomplete: { defaultProps: { - renderOption: (props, option, state, ownerState) => ( - - {ownerState.getOptionLabel(option)} - - ), + renderOption: (props, option, state, ownerState) => { + const { key, ...optionProps } = props; + return ( + + {ownerState.getOptionLabel(option)} + + ); + }, }, }, }, diff --git a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx b/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx index 4703740e9ab0ef..1238555c142157 100644 --- a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx +++ b/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx @@ -14,21 +14,25 @@ const customTheme = (outerTheme: Theme) => components: { MuiAutocomplete: { defaultProps: { - renderOption: (props, option, state, ownerState) => ( - - {ownerState.getOptionLabel(option)} - - ), + renderOption: (props, option, state, ownerState) => { + const { key, ...optionProps } = props; + return ( + + {ownerState.getOptionLabel(option)} + + ); + }, }, }, }, diff --git a/docs/data/material/components/autocomplete/GoogleMaps.js b/docs/data/material/components/autocomplete/GoogleMaps.js index 9ac81f207c836a..e82a16324f8ef3 100644 --- a/docs/data/material/components/autocomplete/GoogleMaps.js +++ b/docs/data/material/components/autocomplete/GoogleMaps.js @@ -114,6 +114,7 @@ export default function GoogleMaps() { )} renderOption={(props, option) => { + const { key, ...optionProps } = props; const matches = option.structured_formatting.main_text_matched_substrings || []; @@ -121,10 +122,9 @@ export default function GoogleMaps() { option.structured_formatting.main_text, matches.map((match) => [match.offset, match.offset + match.length]), ); - return ( -
  • - +
  • + diff --git a/docs/data/material/components/autocomplete/GoogleMaps.tsx b/docs/data/material/components/autocomplete/GoogleMaps.tsx index 269823b32bc4e8..51d388825a34fd 100644 --- a/docs/data/material/components/autocomplete/GoogleMaps.tsx +++ b/docs/data/material/components/autocomplete/GoogleMaps.tsx @@ -138,6 +138,7 @@ export default function GoogleMaps() { )} renderOption={(props, option) => { + const { key, ...optionProps } = props; const matches = option.structured_formatting.main_text_matched_substrings || []; @@ -145,10 +146,9 @@ export default function GoogleMaps() { option.structured_formatting.main_text, matches.map((match: any) => [match.offset, match.offset + match.length]), ); - return ( -
  • - +
  • + diff --git a/docs/data/material/components/autocomplete/Highlights.js b/docs/data/material/components/autocomplete/Highlights.js index 0f56f70ca6e08d..2580df84a3df5b 100644 --- a/docs/data/material/components/autocomplete/Highlights.js +++ b/docs/data/material/components/autocomplete/Highlights.js @@ -15,11 +15,12 @@ export default function Highlights() { )} renderOption={(props, option, { inputValue }) => { + const { key, ...optionProps } = props; const matches = match(option.title, inputValue, { insideWords: true }); const parts = parse(option.title, matches); return ( -
  • +
  • {parts.map((part, index) => ( )} renderOption={(props, option, { inputValue }) => { + const { key, ...optionProps } = props; const matches = match(option.title, inputValue, { insideWords: true }); const parts = parse(option.title, matches); return ( -
  • +
  • {parts.map((part, index) => ( {groupedOptions.length > 0 ? ( - {groupedOptions.map((option, index) => ( -
  • {option.title}
    • - ))} + {groupedOptions.map((option, index) => { + const { key, ...optionProps } = getOptionProps({ option, index }); + return ( +
  • + {option.title} +
    • + ); + })} ) : null} diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.tsx b/docs/data/material/components/autocomplete/UseAutocomplete.tsx index c7706e990e4214..4fb54fa85e2318 100644 --- a/docs/data/material/components/autocomplete/UseAutocomplete.tsx +++ b/docs/data/material/components/autocomplete/UseAutocomplete.tsx @@ -56,9 +56,14 @@ export default function UseAutocomplete() { {groupedOptions.length > 0 ? ( - {(groupedOptions as typeof top100Films).map((option, index) => ( -
  • {option.title}
    • - ))} + {(groupedOptions as typeof top100Films).map((option, index) => { + const { key, ...optionProps } = getOptionProps({ option, index }); + return ( +
  • + {option.title} +
    • + ); + })}     ) : null} diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview b/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview index e53e8c231f0d5a..10f7a19d40e215 100644 --- a/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview +++ b/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview @@ -4,8 +4,13 @@ {groupedOptions.length > 0 ? ( - {(groupedOptions as typeof top100Films).map((option, index) => ( -
  • {option.title}
    • - ))} + {(groupedOptions as typeof top100Films).map((option, index) => { + const { key, ...optionProps } = getOptionProps({ option, index }); + return ( +
  • + {option.title} +
    • + ); + })}     ) : null} \ No newline at end of file diff --git a/docs/data/material/components/autocomplete/Virtualize.js b/docs/data/material/components/autocomplete/Virtualize.js index 7b62b6c4f7b938..8883db2ba00f50 100644 --- a/docs/data/material/components/autocomplete/Virtualize.js +++ b/docs/data/material/components/autocomplete/Virtualize.js @@ -27,8 +27,10 @@ function renderRow(props) { ); } + const { key, ...optionProps } = dataSet[0]; + return ( - + {`#${dataSet[2] + 1} - ${dataSet[1]}`} ); diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx b/docs/data/material/components/autocomplete/Virtualize.tsx index cd6eee98854ff5..3645803a73f06a 100644 --- a/docs/data/material/components/autocomplete/Virtualize.tsx +++ b/docs/data/material/components/autocomplete/Virtualize.tsx @@ -26,8 +26,10 @@ function renderRow(props: ListChildComponentProps) { ); } + const { key, ...optionProps } = dataSet[0]; + return ( - + {`#${dataSet[2] + 1} - ${dataSet[1]}`} );