diff --git a/docs/data/material/components/autocomplete/GoogleMaps.js b/docs/data/material/components/autocomplete/GoogleMaps.js
index fa4b3e2c56ecb9..2eef6910b7cf5c 100644
--- a/docs/data/material/components/autocomplete/GoogleMaps.js
+++ b/docs/data/material/components/autocomplete/GoogleMaps.js
@@ -7,7 +7,6 @@ import Paper from '@mui/material/Paper';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
-import { useTheme } from '@mui/material/styles';
import parse from 'autosuggest-highlight/parse';
// For the sake of this demo, we have to use debounce to reduce Google Maps Places API quote use
// But prefer to use throttle in practice
@@ -30,8 +29,6 @@ function loadScript(src, position) {
}
function CustomPaper(props) {
- const theme = useTheme();
-
return (
{props.children}
@@ -40,23 +37,28 @@ function CustomPaper(props) {
sx={(staticTheme) => ({
display: 'flex',
justifyContent: 'flex-end',
- p: 1,
- pt: '1px',
+ p: '5px 10px 6px 10px',
+ opacity: 0.9,
+ '& path': {
+ fill: '#5e5e5e',
+ },
...staticTheme.applyStyles('dark', {
- opacity: 0.8,
+ opacity: 0.7,
+ '& path': {
+ fill: '#fff',
+ },
}),
})}
>
- 
+ preserveAspectRatio="xMidYMid meet"
+ viewBox="0 0 98 18"
+ width="77"
+ >
+
+
);
@@ -95,7 +97,7 @@ const fetch = debounce(async (request, callback) => {
}),
);
} catch (err) {
- if (err.message === 'Quota exceeded for quota') {
+ if (err.message.startsWith('Quota exceeded for quota')) {
callback(request.input.length === 1 ? fakeAnswer.p : fakeAnswer.paris);
}
@@ -244,7 +246,7 @@ export default function GoogleMaps() {
);
}
-// Fake data in case Google Map Places API returns a rate limit.
+// Fake data in case Google Maps Places API returns a rate limit.
const fakeAnswer = {
p: [
{
diff --git a/docs/data/material/components/autocomplete/GoogleMaps.tsx b/docs/data/material/components/autocomplete/GoogleMaps.tsx
index 369f21f2e3ad3b..ee5450a9b3feab 100644
--- a/docs/data/material/components/autocomplete/GoogleMaps.tsx
+++ b/docs/data/material/components/autocomplete/GoogleMaps.tsx
@@ -6,7 +6,6 @@ import Paper, { PaperProps } from '@mui/material/Paper';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
-import { useTheme } from '@mui/material/styles';
import parse from 'autosuggest-highlight/parse';
// For the sake of this demo, we have to use debounce to reduce Google Maps Places API quote use
// But prefer to use throttle in practice
@@ -43,8 +42,6 @@ interface PlaceType {
}
function CustomPaper(props: PaperProps) {
- const theme = useTheme();
-
return (
{props.children}
@@ -53,23 +50,28 @@ function CustomPaper(props: PaperProps) {
sx={(staticTheme) => ({
display: 'flex',
justifyContent: 'flex-end',
- p: 1,
- pt: '1px',
+ p: '5px 10px 6px 10px',
+ opacity: 0.9,
+ '& path': {
+ fill: '#5e5e5e',
+ },
...staticTheme.applyStyles('dark', {
- opacity: 0.8,
+ opacity: 0.7,
+ '& path': {
+ fill: '#fff',
+ },
}),
})}
>
-
+ preserveAspectRatio="xMidYMid meet"
+ viewBox="0 0 98 18"
+ width="77"
+ >
+
+
);
@@ -108,7 +110,7 @@ const fetch = debounce(
}),
);
} catch (err: any) {
- if (err.message === 'Quota exceeded for quota') {
+ if (err.message.startsWith('Quota exceeded for quota')) {
callback(request.input.length === 1 ? fakeAnswer.p : fakeAnswer.paris);
}
@@ -262,7 +264,7 @@ export default function GoogleMaps() {
);
}
-// Fake data in case Google Map Places API returns a rate limit.
+// Fake data in case Google Maps Places API returns a rate limit.
const fakeAnswer = {
p: [
{