From a4990cc92b24e32182c310c58ee5950b9e010f2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Thu, 25 Aug 2022 11:44:48 +0200 Subject: [PATCH 1/6] [docs] Explain the purpose of renderGroup prop --- .../components/autocomplete/RenderGroup.js | 165 ++++++++++++++++++ .../components/autocomplete/RenderGroup.tsx | 165 ++++++++++++++++++ .../autocomplete/RenderGroup.tsx.preview | 14 ++ .../components/autocomplete/autocomplete.md | 8 + 4 files changed, 352 insertions(+) create mode 100644 docs/data/material/components/autocomplete/RenderGroup.js create mode 100644 docs/data/material/components/autocomplete/RenderGroup.tsx create mode 100644 docs/data/material/components/autocomplete/RenderGroup.tsx.preview diff --git a/docs/data/material/components/autocomplete/RenderGroup.js b/docs/data/material/components/autocomplete/RenderGroup.js new file mode 100644 index 00000000000000..ddf98d37710fc2 --- /dev/null +++ b/docs/data/material/components/autocomplete/RenderGroup.js @@ -0,0 +1,165 @@ +import * as React from 'react'; +import TextField from '@mui/material/TextField'; +import Autocomplete from '@mui/material/Autocomplete'; +import { styled } from '@mui/system'; + +const GroupHeader = styled('div')({ + position: 'sticky', + top: 0, + padding: '4px 10px', +}); + +export default function RenderGroup() { + const options = top100Films.map((option) => { + const firstLetter = option.title[0].toUpperCase(); + return { + firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter, + ...option, + }; + }); + + return ( + -b.firstLetter.localeCompare(a.firstLetter))} + groupBy={(option) => option.firstLetter} + getOptionLabel={(option) => option.title} + sx={{ width: 300 }} + renderInput={(params) => } + renderGroup={(params) => ( +
  • + {params.group} +
      {params.children}
    +
    • + )} + /> + ); +} + +// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top +const top100Films = [ + { title: 'The Shawshank Redemption', year: 1994 }, + { title: 'The Godfather', year: 1972 }, + { title: 'The Godfather: Part II', year: 1974 }, + { title: 'The Dark Knight', year: 2008 }, + { title: '12 Angry Men', year: 1957 }, + { title: "Schindler's List", year: 1993 }, + { title: 'Pulp Fiction', year: 1994 }, + { + title: 'The Lord of the Rings: The Return of the King', + year: 2003, + }, + { title: 'The Good, the Bad and the Ugly', year: 1966 }, + { title: 'Fight Club', year: 1999 }, + { + title: 'The Lord of the Rings: The Fellowship of the Ring', + year: 2001, + }, + { + title: 'Star Wars: Episode V - The Empire Strikes Back', + year: 1980, + }, + { title: 'Forrest Gump', year: 1994 }, + { title: 'Inception', year: 2010 }, + { + title: 'The Lord of the Rings: The Two Towers', + year: 2002, + }, + { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, + { title: 'Goodfellas', year: 1990 }, + { title: 'The Matrix', year: 1999 }, + { title: 'Seven Samurai', year: 1954 }, + { + title: 'Star Wars: Episode IV - A New Hope', + year: 1977, + }, + { title: 'City of God', year: 2002 }, + { title: 'Se7en', year: 1995 }, + { title: 'The Silence of the Lambs', year: 1991 }, + { title: "It's a Wonderful Life", year: 1946 }, + { title: 'Life Is Beautiful', year: 1997 }, + { title: 'The Usual Suspects', year: 1995 }, + { title: 'Léon: The Professional', year: 1994 }, + { title: 'Spirited Away', year: 2001 }, + { title: 'Saving Private Ryan', year: 1998 }, + { title: 'Once Upon a Time in the West', year: 1968 }, + { title: 'American History X', year: 1998 }, + { title: 'Interstellar', year: 2014 }, + { title: 'Casablanca', year: 1942 }, + { title: 'City Lights', year: 1931 }, + { title: 'Psycho', year: 1960 }, + { title: 'The Green Mile', year: 1999 }, + { title: 'The Intouchables', year: 2011 }, + { title: 'Modern Times', year: 1936 }, + { title: 'Raiders of the Lost Ark', year: 1981 }, + { title: 'Rear Window', year: 1954 }, + { title: 'The Pianist', year: 2002 }, + { title: 'The Departed', year: 2006 }, + { title: 'Terminator 2: Judgment Day', year: 1991 }, + { title: 'Back to the Future', year: 1985 }, + { title: 'Whiplash', year: 2014 }, + { title: 'Gladiator', year: 2000 }, + { title: 'Memento', year: 2000 }, + { title: 'The Prestige', year: 2006 }, + { title: 'The Lion King', year: 1994 }, + { title: 'Apocalypse Now', year: 1979 }, + { title: 'Alien', year: 1979 }, + { title: 'Sunset Boulevard', year: 1950 }, + { + title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', + year: 1964, + }, + { title: 'The Great Dictator', year: 1940 }, + { title: 'Cinema Paradiso', year: 1988 }, + { title: 'The Lives of Others', year: 2006 }, + { title: 'Grave of the Fireflies', year: 1988 }, + { title: 'Paths of Glory', year: 1957 }, + { title: 'Django Unchained', year: 2012 }, + { title: 'The Shining', year: 1980 }, + { title: 'WALL·E', year: 2008 }, + { title: 'American Beauty', year: 1999 }, + { title: 'The Dark Knight Rises', year: 2012 }, + { title: 'Princess Mononoke', year: 1997 }, + { title: 'Aliens', year: 1986 }, + { title: 'Oldboy', year: 2003 }, + { title: 'Once Upon a Time in America', year: 1984 }, + { title: 'Witness for the Prosecution', year: 1957 }, + { title: 'Das Boot', year: 1981 }, + { title: 'Citizen Kane', year: 1941 }, + { title: 'North by Northwest', year: 1959 }, + { title: 'Vertigo', year: 1958 }, + { + title: 'Star Wars: Episode VI - Return of the Jedi', + year: 1983, + }, + { title: 'Reservoir Dogs', year: 1992 }, + { title: 'Braveheart', year: 1995 }, + { title: 'M', year: 1931 }, + { title: 'Requiem for a Dream', year: 2000 }, + { title: 'Amélie', year: 2001 }, + { title: 'A Clockwork Orange', year: 1971 }, + { title: 'Like Stars on Earth', year: 2007 }, + { title: 'Taxi Driver', year: 1976 }, + { title: 'Lawrence of Arabia', year: 1962 }, + { title: 'Double Indemnity', year: 1944 }, + { + title: 'Eternal Sunshine of the Spotless Mind', + year: 2004, + }, + { title: 'Amadeus', year: 1984 }, + { title: 'To Kill a Mockingbird', year: 1962 }, + { title: 'Toy Story 3', year: 2010 }, + { title: 'Logan', year: 2017 }, + { title: 'Full Metal Jacket', year: 1987 }, + { title: 'Dangal', year: 2016 }, + { title: 'The Sting', year: 1973 }, + { title: '2001: A Space Odyssey', year: 1968 }, + { title: "Singin' in the Rain", year: 1952 }, + { title: 'Toy Story', year: 1995 }, + { title: 'Bicycle Thieves', year: 1948 }, + { title: 'The Kid', year: 1921 }, + { title: 'Inglourious Basterds', year: 2009 }, + { title: 'Snatch', year: 2000 }, + { title: '3 Idiots', year: 2009 }, + { title: 'Monty Python and the Holy Grail', year: 1975 }, +]; diff --git a/docs/data/material/components/autocomplete/RenderGroup.tsx b/docs/data/material/components/autocomplete/RenderGroup.tsx new file mode 100644 index 00000000000000..ddf98d37710fc2 --- /dev/null +++ b/docs/data/material/components/autocomplete/RenderGroup.tsx @@ -0,0 +1,165 @@ +import * as React from 'react'; +import TextField from '@mui/material/TextField'; +import Autocomplete from '@mui/material/Autocomplete'; +import { styled } from '@mui/system'; + +const GroupHeader = styled('div')({ + position: 'sticky', + top: 0, + padding: '4px 10px', +}); + +export default function RenderGroup() { + const options = top100Films.map((option) => { + const firstLetter = option.title[0].toUpperCase(); + return { + firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter, + ...option, + }; + }); + + return ( + -b.firstLetter.localeCompare(a.firstLetter))} + groupBy={(option) => option.firstLetter} + getOptionLabel={(option) => option.title} + sx={{ width: 300 }} + renderInput={(params) => } + renderGroup={(params) => ( +
  • + {params.group} +
      {params.children}
    +
    • + )} + /> + ); +} + +// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top +const top100Films = [ + { title: 'The Shawshank Redemption', year: 1994 }, + { title: 'The Godfather', year: 1972 }, + { title: 'The Godfather: Part II', year: 1974 }, + { title: 'The Dark Knight', year: 2008 }, + { title: '12 Angry Men', year: 1957 }, + { title: "Schindler's List", year: 1993 }, + { title: 'Pulp Fiction', year: 1994 }, + { + title: 'The Lord of the Rings: The Return of the King', + year: 2003, + }, + { title: 'The Good, the Bad and the Ugly', year: 1966 }, + { title: 'Fight Club', year: 1999 }, + { + title: 'The Lord of the Rings: The Fellowship of the Ring', + year: 2001, + }, + { + title: 'Star Wars: Episode V - The Empire Strikes Back', + year: 1980, + }, + { title: 'Forrest Gump', year: 1994 }, + { title: 'Inception', year: 2010 }, + { + title: 'The Lord of the Rings: The Two Towers', + year: 2002, + }, + { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, + { title: 'Goodfellas', year: 1990 }, + { title: 'The Matrix', year: 1999 }, + { title: 'Seven Samurai', year: 1954 }, + { + title: 'Star Wars: Episode IV - A New Hope', + year: 1977, + }, + { title: 'City of God', year: 2002 }, + { title: 'Se7en', year: 1995 }, + { title: 'The Silence of the Lambs', year: 1991 }, + { title: "It's a Wonderful Life", year: 1946 }, + { title: 'Life Is Beautiful', year: 1997 }, + { title: 'The Usual Suspects', year: 1995 }, + { title: 'Léon: The Professional', year: 1994 }, + { title: 'Spirited Away', year: 2001 }, + { title: 'Saving Private Ryan', year: 1998 }, + { title: 'Once Upon a Time in the West', year: 1968 }, + { title: 'American History X', year: 1998 }, + { title: 'Interstellar', year: 2014 }, + { title: 'Casablanca', year: 1942 }, + { title: 'City Lights', year: 1931 }, + { title: 'Psycho', year: 1960 }, + { title: 'The Green Mile', year: 1999 }, + { title: 'The Intouchables', year: 2011 }, + { title: 'Modern Times', year: 1936 }, + { title: 'Raiders of the Lost Ark', year: 1981 }, + { title: 'Rear Window', year: 1954 }, + { title: 'The Pianist', year: 2002 }, + { title: 'The Departed', year: 2006 }, + { title: 'Terminator 2: Judgment Day', year: 1991 }, + { title: 'Back to the Future', year: 1985 }, + { title: 'Whiplash', year: 2014 }, + { title: 'Gladiator', year: 2000 }, + { title: 'Memento', year: 2000 }, + { title: 'The Prestige', year: 2006 }, + { title: 'The Lion King', year: 1994 }, + { title: 'Apocalypse Now', year: 1979 }, + { title: 'Alien', year: 1979 }, + { title: 'Sunset Boulevard', year: 1950 }, + { + title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', + year: 1964, + }, + { title: 'The Great Dictator', year: 1940 }, + { title: 'Cinema Paradiso', year: 1988 }, + { title: 'The Lives of Others', year: 2006 }, + { title: 'Grave of the Fireflies', year: 1988 }, + { title: 'Paths of Glory', year: 1957 }, + { title: 'Django Unchained', year: 2012 }, + { title: 'The Shining', year: 1980 }, + { title: 'WALL·E', year: 2008 }, + { title: 'American Beauty', year: 1999 }, + { title: 'The Dark Knight Rises', year: 2012 }, + { title: 'Princess Mononoke', year: 1997 }, + { title: 'Aliens', year: 1986 }, + { title: 'Oldboy', year: 2003 }, + { title: 'Once Upon a Time in America', year: 1984 }, + { title: 'Witness for the Prosecution', year: 1957 }, + { title: 'Das Boot', year: 1981 }, + { title: 'Citizen Kane', year: 1941 }, + { title: 'North by Northwest', year: 1959 }, + { title: 'Vertigo', year: 1958 }, + { + title: 'Star Wars: Episode VI - Return of the Jedi', + year: 1983, + }, + { title: 'Reservoir Dogs', year: 1992 }, + { title: 'Braveheart', year: 1995 }, + { title: 'M', year: 1931 }, + { title: 'Requiem for a Dream', year: 2000 }, + { title: 'Amélie', year: 2001 }, + { title: 'A Clockwork Orange', year: 1971 }, + { title: 'Like Stars on Earth', year: 2007 }, + { title: 'Taxi Driver', year: 1976 }, + { title: 'Lawrence of Arabia', year: 1962 }, + { title: 'Double Indemnity', year: 1944 }, + { + title: 'Eternal Sunshine of the Spotless Mind', + year: 2004, + }, + { title: 'Amadeus', year: 1984 }, + { title: 'To Kill a Mockingbird', year: 1962 }, + { title: 'Toy Story 3', year: 2010 }, + { title: 'Logan', year: 2017 }, + { title: 'Full Metal Jacket', year: 1987 }, + { title: 'Dangal', year: 2016 }, + { title: 'The Sting', year: 1973 }, + { title: '2001: A Space Odyssey', year: 1968 }, + { title: "Singin' in the Rain", year: 1952 }, + { title: 'Toy Story', year: 1995 }, + { title: 'Bicycle Thieves', year: 1948 }, + { title: 'The Kid', year: 1921 }, + { title: 'Inglourious Basterds', year: 2009 }, + { title: 'Snatch', year: 2000 }, + { title: '3 Idiots', year: 2009 }, + { title: 'Monty Python and the Holy Grail', year: 1975 }, +]; diff --git a/docs/data/material/components/autocomplete/RenderGroup.tsx.preview b/docs/data/material/components/autocomplete/RenderGroup.tsx.preview new file mode 100644 index 00000000000000..8734b2781f1803 --- /dev/null +++ b/docs/data/material/components/autocomplete/RenderGroup.tsx.preview @@ -0,0 +1,14 @@ + -b.firstLetter.localeCompare(a.firstLetter))} + groupBy={(option) => option.firstLetter} + getOptionLabel={(option) => option.title} + sx={{ width: 300 }} + renderInput={(params) => } + renderGroup={(params) => ( +
  • + {params.group} +
      {params.children}
    +
    • + )} +/> \ No newline at end of file diff --git a/docs/data/material/components/autocomplete/autocomplete.md b/docs/data/material/components/autocomplete/autocomplete.md index ee142641c8e112..f0c493efaa8c31 100644 --- a/docs/data/material/components/autocomplete/autocomplete.md +++ b/docs/data/material/components/autocomplete/autocomplete.md @@ -114,6 +114,14 @@ otherwise, you will notice duplicate headers. {{"demo": "Grouped.js"}} +To control how the groups are rendered, provide a custom `renderGroup` prop. +It is a function that accept an object with two fields. +`group` is a string representing a group name. `children` is a collection of list items that belong to the group. + +Use this prop to define a custom markup and override the styles of the default groups. + +{{"demo": "RenderGroup.js"}} + ## Disabled options {{"demo": "DisabledOptions.js"}} From f23b2502af66301ee38f34db95efde79a16b530b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Mon, 19 Sep 2022 11:23:26 +0200 Subject: [PATCH 2/6] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Signed-off-by: Michał Dudak --- docs/data/material/components/autocomplete/autocomplete.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/data/material/components/autocomplete/autocomplete.md b/docs/data/material/components/autocomplete/autocomplete.md index f0c493efaa8c31..037772f4dfebd4 100644 --- a/docs/data/material/components/autocomplete/autocomplete.md +++ b/docs/data/material/components/autocomplete/autocomplete.md @@ -115,10 +115,11 @@ otherwise, you will notice duplicate headers. {{"demo": "Grouped.js"}} To control how the groups are rendered, provide a custom `renderGroup` prop. -It is a function that accept an object with two fields. -`group` is a string representing a group name. `children` is a collection of list items that belong to the group. +This is a function that accepts an object with two fields: +- `group`—a string representing a group name +- `children`—a collection of list items that belong to the group -Use this prop to define a custom markup and override the styles of the default groups. +The following demo shows how to use this prop to define custom markup and override the styles of the default groups: {{"demo": "RenderGroup.js"}} From d0d10c905b78e4f8116b772bb420d7c424ff2d0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Mon, 19 Sep 2022 12:01:51 +0200 Subject: [PATCH 3/6] Update the appearance of the demo --- .../components/autocomplete/RenderGroup.js | 24 ++++++++++++++----- .../components/autocomplete/RenderGroup.tsx | 24 ++++++++++++++----- .../autocomplete/RenderGroup.tsx.preview | 2 +- .../components/autocomplete/autocomplete.md | 1 + 4 files changed, 38 insertions(+), 13 deletions(-) diff --git a/docs/data/material/components/autocomplete/RenderGroup.js b/docs/data/material/components/autocomplete/RenderGroup.js index ddf98d37710fc2..dad87a5e4eb13f 100644 --- a/docs/data/material/components/autocomplete/RenderGroup.js +++ b/docs/data/material/components/autocomplete/RenderGroup.js @@ -1,14 +1,26 @@ import * as React from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; -import { styled } from '@mui/system'; +import { styled, lighten, darken } from '@mui/system'; -const GroupHeader = styled('div')({ - position: 'sticky', - top: 0, - padding: '4px 10px', +const GroupHeader = styled('div')(({ theme }) => { + console.log(theme); + return { + position: 'sticky', + top: '-8px', + padding: '4px 10px', + color: theme.palette.primary.main, + backgroundColor: + theme.palette.mode === 'light' + ? lighten(theme.palette.primary.light, 0.85) + : darken(theme.palette.primary.main, 0.8), + }; }); +const GroupItems = styled('ul')(` + padding: 0; +`); + export default function RenderGroup() { const options = top100Films.map((option) => { const firstLetter = option.title[0].toUpperCase(); @@ -29,7 +41,7 @@ export default function RenderGroup() { renderGroup={(params) => (
  • {params.group} -
      {params.children}
    + {params.children}
    • )} /> diff --git a/docs/data/material/components/autocomplete/RenderGroup.tsx b/docs/data/material/components/autocomplete/RenderGroup.tsx index ddf98d37710fc2..dad87a5e4eb13f 100644 --- a/docs/data/material/components/autocomplete/RenderGroup.tsx +++ b/docs/data/material/components/autocomplete/RenderGroup.tsx @@ -1,14 +1,26 @@ import * as React from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; -import { styled } from '@mui/system'; +import { styled, lighten, darken } from '@mui/system'; -const GroupHeader = styled('div')({ - position: 'sticky', - top: 0, - padding: '4px 10px', +const GroupHeader = styled('div')(({ theme }) => { + console.log(theme); + return { + position: 'sticky', + top: '-8px', + padding: '4px 10px', + color: theme.palette.primary.main, + backgroundColor: + theme.palette.mode === 'light' + ? lighten(theme.palette.primary.light, 0.85) + : darken(theme.palette.primary.main, 0.8), + }; }); +const GroupItems = styled('ul')(` + padding: 0; +`); + export default function RenderGroup() { const options = top100Films.map((option) => { const firstLetter = option.title[0].toUpperCase(); @@ -29,7 +41,7 @@ export default function RenderGroup() { renderGroup={(params) => (
  • {params.group} -
      {params.children}
    + {params.children}
    • )} /> diff --git a/docs/data/material/components/autocomplete/RenderGroup.tsx.preview b/docs/data/material/components/autocomplete/RenderGroup.tsx.preview index 8734b2781f1803..a81547aa30b5b7 100644 --- a/docs/data/material/components/autocomplete/RenderGroup.tsx.preview +++ b/docs/data/material/components/autocomplete/RenderGroup.tsx.preview @@ -8,7 +8,7 @@ renderGroup={(params) => (
  • {params.group} -
      {params.children}
    + {params.children}
    • )} /> \ No newline at end of file diff --git a/docs/data/material/components/autocomplete/autocomplete.md b/docs/data/material/components/autocomplete/autocomplete.md index 037772f4dfebd4..70bac10022749e 100644 --- a/docs/data/material/components/autocomplete/autocomplete.md +++ b/docs/data/material/components/autocomplete/autocomplete.md @@ -116,6 +116,7 @@ otherwise, you will notice duplicate headers. To control how the groups are rendered, provide a custom `renderGroup` prop. This is a function that accepts an object with two fields: + - `group`—a string representing a group name - `children`—a collection of list items that belong to the group From 518c4ffd13ddf4f6b040341a59529e876565cd81 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 3 Oct 2022 12:49:11 +0200 Subject: [PATCH 4/6] Remove console.log from the demos Signed-off-by: Marija Najdova --- docs/data/material/components/autocomplete/RenderGroup.js | 1 - docs/data/material/components/autocomplete/RenderGroup.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/docs/data/material/components/autocomplete/RenderGroup.js b/docs/data/material/components/autocomplete/RenderGroup.js index dad87a5e4eb13f..23db525717b7bf 100644 --- a/docs/data/material/components/autocomplete/RenderGroup.js +++ b/docs/data/material/components/autocomplete/RenderGroup.js @@ -4,7 +4,6 @@ import Autocomplete from '@mui/material/Autocomplete'; import { styled, lighten, darken } from '@mui/system'; const GroupHeader = styled('div')(({ theme }) => { - console.log(theme); return { position: 'sticky', top: '-8px', diff --git a/docs/data/material/components/autocomplete/RenderGroup.tsx b/docs/data/material/components/autocomplete/RenderGroup.tsx index dad87a5e4eb13f..23db525717b7bf 100644 --- a/docs/data/material/components/autocomplete/RenderGroup.tsx +++ b/docs/data/material/components/autocomplete/RenderGroup.tsx @@ -4,7 +4,6 @@ import Autocomplete from '@mui/material/Autocomplete'; import { styled, lighten, darken } from '@mui/system'; const GroupHeader = styled('div')(({ theme }) => { - console.log(theme); return { position: 'sticky', top: '-8px', From 262e93407d15a295726f109f01158cc8d42d8c4b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 3 Oct 2022 13:27:39 +0200 Subject: [PATCH 5/6] Use same coding style as other demos --- .../components/autocomplete/RenderGroup.js | 28 +++++++++---------- .../components/autocomplete/RenderGroup.tsx | 28 +++++++++---------- 2 files changed, 26 insertions(+), 30 deletions(-) diff --git a/docs/data/material/components/autocomplete/RenderGroup.js b/docs/data/material/components/autocomplete/RenderGroup.js index 23db525717b7bf..7c80925fc1792d 100644 --- a/docs/data/material/components/autocomplete/RenderGroup.js +++ b/docs/data/material/components/autocomplete/RenderGroup.js @@ -3,22 +3,20 @@ import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; import { styled, lighten, darken } from '@mui/system'; -const GroupHeader = styled('div')(({ theme }) => { - return { - position: 'sticky', - top: '-8px', - padding: '4px 10px', - color: theme.palette.primary.main, - backgroundColor: - theme.palette.mode === 'light' - ? lighten(theme.palette.primary.light, 0.85) - : darken(theme.palette.primary.main, 0.8), - }; -}); +const GroupHeader = styled('div')(({ theme }) => ({ + position: 'sticky', + top: '-8px', + padding: '4px 10px', + color: theme.palette.primary.main, + backgroundColor: + theme.palette.mode === 'light' + ? lighten(theme.palette.primary.light, 0.85) + : darken(theme.palette.primary.main, 0.8), +})); -const GroupItems = styled('ul')(` - padding: 0; -`); +const GroupItems = styled('ul')({ + padding: 0, +}); export default function RenderGroup() { const options = top100Films.map((option) => { diff --git a/docs/data/material/components/autocomplete/RenderGroup.tsx b/docs/data/material/components/autocomplete/RenderGroup.tsx index 23db525717b7bf..7c80925fc1792d 100644 --- a/docs/data/material/components/autocomplete/RenderGroup.tsx +++ b/docs/data/material/components/autocomplete/RenderGroup.tsx @@ -3,22 +3,20 @@ import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; import { styled, lighten, darken } from '@mui/system'; -const GroupHeader = styled('div')(({ theme }) => { - return { - position: 'sticky', - top: '-8px', - padding: '4px 10px', - color: theme.palette.primary.main, - backgroundColor: - theme.palette.mode === 'light' - ? lighten(theme.palette.primary.light, 0.85) - : darken(theme.palette.primary.main, 0.8), - }; -}); +const GroupHeader = styled('div')(({ theme }) => ({ + position: 'sticky', + top: '-8px', + padding: '4px 10px', + color: theme.palette.primary.main, + backgroundColor: + theme.palette.mode === 'light' + ? lighten(theme.palette.primary.light, 0.85) + : darken(theme.palette.primary.main, 0.8), +})); -const GroupItems = styled('ul')(` - padding: 0; -`); +const GroupItems = styled('ul')({ + padding: 0, +}); export default function RenderGroup() { const options = top100Films.map((option) => { From cfeb79ae3cebcbb75f42bbf8b9a60f40bbdc1679 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Tue, 4 Oct 2022 15:42:25 +0200 Subject: [PATCH 6/6] Restart CI