diff --git a/docs/data/base/components/slider/LabeledValuesSlider.js b/docs/data/base/components/slider/LabeledValuesSlider.js
index b8a956200044fe..a6a23fb1760622 100644
--- a/docs/data/base/components/slider/LabeledValuesSlider.js
+++ b/docs/data/base/components/slider/LabeledValuesSlider.js
@@ -60,7 +60,7 @@ const StyledSlider = styled(Slider)(
&:hover {
opacity: 1;
}
- &.${sliderClasses.disabled} {
+ &.${sliderClasses.disabled} {
pointer-events: none;
cursor: default;
color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
diff --git a/docs/data/base/components/slider/LabeledValuesSlider.tsx b/docs/data/base/components/slider/LabeledValuesSlider.tsx
index 042993242de0b2..374ecbfcf769dc 100644
--- a/docs/data/base/components/slider/LabeledValuesSlider.tsx
+++ b/docs/data/base/components/slider/LabeledValuesSlider.tsx
@@ -59,7 +59,7 @@ const StyledSlider = styled(Slider)(
&:hover {
opacity: 1;
}
- &.${sliderClasses.disabled} {
+ &.${sliderClasses.disabled} {
pointer-events: none;
cursor: default;
color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 5102327834e01f..cf13a39054e3ad 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -6,6 +6,7 @@ import { alpha, styled } from '@mui/material/styles';
import { styled as joyStyled } from '@mui/joy/styles';
import { unstable_useId as useId } from '@mui/utils';
import IconButton from '@mui/material/IconButton';
+import Box from '@mui/material/Box';
import Collapse from '@mui/material/Collapse';
import NoSsr from '@mui/material/NoSsr';
import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
@@ -21,6 +22,7 @@ import { CODE_VARIANTS, CODE_STYLING } from 'docs/src/modules/constants';
import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
import stylingSolutionMapping from 'docs/src/modules/utils/stylingSolutionMapping';
import BrandingProvider from 'docs/src/BrandingProvider';
+import DemoToolbarRoot from 'docs/src/modules/components/DemoToolbarRoot';
import { blue, blueDark, grey } from 'docs/src/modules/brandingTheme';
/**
@@ -33,23 +35,12 @@ function trimLeadingSpaces(input = '') {
}
const DemoToolbar = React.lazy(() => import('./DemoToolbar'));
-// Sync with styles from DemoToolbar
-// Importing the styles results in no bundle size reduction
-const DemoToolbarFallbackRoot = styled('div')(({ theme }) => {
- return {
- display: 'none',
- [theme.breakpoints.up('sm')]: {
- display: 'block',
- height: 40 + 5 * 2 + 1 * 2,
- marginTop: -1,
- },
- };
-});
function DemoToolbarFallback() {
const t = useTranslate();
- return ;
+ // Sync with styles from DemoToolbar, we can't import the styles
+ return ;
}
function getDemoName(location) {
@@ -549,30 +540,32 @@ export default function Demo(props) {
{/* TODO: BrandingProvider shouldn't be needed, it should already be at the top of the docs page */}
{demoOptions.hideToolbar ? null : (
- }>
- }>
- {
- setCodeOpen((open) => !open);
- setShowAd(true);
- }}
- onResetDemoClick={resetDemo}
- openDemoSource={openDemoSource}
- showPreview={showPreview}
- />
-
-
+
+ }>
+ }>
+ {
+ setCodeOpen((open) => !open);
+ setShowAd(true);
+ }}
+ onResetDemoClick={resetDemo}
+ openDemoSource={openDemoSource}
+ showPreview={showPreview}
+ />
+
+
+
)}
{/* A limitation from https://github.com/nihgwu/react-runner,
diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
index 3e7cffdb8a0acd..335853d664fd82 100644
--- a/docs/src/modules/components/DemoToolbar.js
+++ b/docs/src/modules/components/DemoToolbar.js
@@ -32,28 +32,12 @@ import stylingSolutionMapping from 'docs/src/modules/utils/stylingSolutionMappin
import codeSandbox from '../sandbox/CodeSandbox';
import stackBlitz from '../sandbox/StackBlitz';
-const Root = styled('div', {
- shouldForwardProp: (prop) => prop !== 'demoOptions' && prop !== 'openDemoSource',
-})(({ theme, demoOptions, openDemoSource }) => [
+const Root = styled('div')(({ theme }) => [
{
- display: 'none',
[theme.breakpoints.up('sm')]: {
justifyContent: 'space-between',
alignItems: 'center',
- border: `1px solid ${(theme.vars || theme).palette.divider}`,
- marginTop: demoOptions.bg === 'inline' ? theme.spacing(1) : -1,
display: 'flex',
- top: 0,
- padding: theme.spacing(0.5, 1),
- backgroundColor: alpha(theme.palette.grey[50], 0.2),
- borderRadius: openDemoSource ? 0 : '0 0 12px 12px',
- transition: theme.transitions.create('border-radius'),
- ...(theme.direction === 'rtl' && {
- left: theme.spacing(1),
- }),
- ...(theme.direction !== 'rtl' && {
- right: theme.spacing(1),
- }),
},
'& .MuiSvgIcon-root': {
fontSize: 16,
@@ -61,9 +45,6 @@ const Root = styled('div', {
},
},
theme.applyDarkStyles({
- [theme.breakpoints.up('sm')]: {
- backgroundColor: alpha(theme.palette.primaryDark[800], 0.2),
- },
'& .MuiSvgIcon-root': {
color: (theme.vars || theme).palette.grey[400],
},
@@ -531,12 +512,7 @@ export default function DemoToolbar(props) {
return (
-
+
{hasNonSystemDemos && (