[docs-infra] Use the @mui/docs/HighlightedCode

docs/data/charts/bars/BarClickNoSnap.js

@@ -7,7 +7,7 @@ import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
 
 import { BarChart } from '@mui/x-charts/BarChart';
 
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const barChartsParams = {
   series: [

docs/data/charts/bars/ColorScaleNoSnap.js → docs/data/charts/bars/ColorScale.js

@@ -3,12 +3,11 @@ import { BarChart } from '@mui/x-charts/BarChart';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
-// @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const series = [{ data: [-2, -9, 12, 11, 6, -4] }];
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState('piecewise');
   const [colorY, setColorY] = React.useState('None');
 

docs/data/charts/bars/ColorScaleNoSnap.tsx → docs/data/charts/bars/ColorScale.tsx

@@ -3,12 +3,11 @@ import { BarChart } from '@mui/x-charts/BarChart';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
-// @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const series = [{ data: [-2, -9, 12, 11, 6, -4] }];
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState<
     'None' | 'piecewise' | 'continuous' | 'ordinal'
   >('piecewise');

docs/data/charts/bars/bars.md

@@ -98,7 +98,7 @@ The bar charts use by priority:
 
 Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts/styling/#values-color).
 
-{{"demo": "ColorScaleNoSnap.js"}}
+{{"demo": "ColorScale.js"}}
 
 ### Border Radius
 

docs/data/charts/lines/ColorScaleNoSnap.js → docs/data/charts/lines/ColorScale.js

@@ -3,10 +3,9 @@ import { LineChart } from '@mui/x-charts/LineChart';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
-// @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState('None');
   const [colorY, setColorY] = React.useState('piecewise');
 

docs/data/charts/lines/ColorScaleNoSnap.tsx → docs/data/charts/lines/ColorScale.tsx

@@ -3,10 +3,9 @@ import { LineChart } from '@mui/x-charts/LineChart';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
-// @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState<
     'None' | 'piecewise' | 'continuous' | 'ordinal'
   >('None');

docs/data/charts/lines/InterpolationDemoNoSnap.js

@@ -4,7 +4,7 @@ import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 import { LineChart } from '@mui/x-charts/LineChart';
 
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const curveTypes = [
   'catmullRom',

docs/data/charts/lines/LineClickNoSnap.js

@@ -7,7 +7,7 @@ import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
 
 import { LineChart } from '@mui/x-charts/LineChart';
 
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const lineChartsParams = {
   series: [

docs/data/charts/lines/lines.md

@@ -159,7 +159,7 @@ The line charts use by priority:
 
 Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts/styling/#values-color).
 
-{{"demo": "ColorScaleNoSnap.js"}}
+{{"demo": "ColorScale.js"}}
 
 :::warning
 For now, ordinal config is not supported for line chart.

docs/data/charts/pie/PieClickNoSnap.js

@@ -7,7 +7,7 @@ import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
 
 import { PieChart } from '@mui/x-charts/PieChart';
 
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const data1 = [
   { label: 'Group A', value: 400 },

docs/data/charts/scatter/ColorScaleNoSnap.js → docs/data/charts/scatter/ColorScale.js

@@ -4,15 +4,14 @@ import { ScatterChart } from '@mui/x-charts/ScatterChart';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
-// @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 import { Chance } from 'chance';
 
 const POINTS_NUMBER = 50;
 const chance = new Chance(42);
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState('piecewise');
   const [colorY, setColorY] = React.useState('None');
   const [colorZ, setColorZ] = React.useState('None');

docs/data/charts/scatter/ColorScaleNoSnap.tsx → docs/data/charts/scatter/ColorScale.tsx

@@ -4,15 +4,14 @@ import { ScatterValueType } from '@mui/x-charts';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
-// @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 import { Chance } from 'chance';
 
 const POINTS_NUMBER = 50;
 const chance = new Chance(42);
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState<'None' | 'piecewise' | 'continuous'>(
     'piecewise',
   );

docs/data/charts/scatter/ScatterClickNoSnap.js

@@ -7,7 +7,7 @@ import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
 
 import { ScatterChart } from '@mui/x-charts/ScatterChart';
 
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const scatterChartsParams = {
   series: [

docs/data/charts/scatter/scatter.md

@@ -88,7 +88,7 @@ Here are three ways to set z value to 5.
 
 Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts/styling/#values-color).
 
-{{"demo": "ColorScaleNoSnap.js"}}
+{{"demo": "ColorScale.js"}}
 
 ### Grid
 

docs/data/data-grid/events/CatalogOfEventsNoSnap.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';

docs/data/date-pickers/base-concepts/ComponentExplorerNoSnap.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 // @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
 import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';

docs/data/date-pickers/base-concepts/ComponentExplorerNoSnap.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 // @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
 import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';

docs/src/modules/components/ApiDocs.js

@@ -7,7 +7,7 @@ import AccordionDetails from '@mui/material/AccordionDetails';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import PropTypes from 'prop-types';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const PrimaryHeading = styled(Typography)(({ theme }) => ({
   fontSize: theme.typography.pxToRem(15),

docs/src/modules/components/ChartsUsageDemo.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Box from '@mui/joy/Box';
 import BrandingProvider from 'docs/src/BrandingProvider';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import DemoPropsForm from './DemoPropsForm';
 
 export default function ChartsUsageDemo({

docs/src/modules/components/CustomizationPlayground.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 // @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 // @ts-ignore
 import BrandingProvider from 'docs/src/BrandingProvider';
 import { styled, Theme, alpha, useTheme } from '@mui/material/styles';

docs/src/modules/components/InterfaceApiPage.js

@@ -7,8 +7,8 @@ import Alert from '@mui/material/Alert';
 import VerifiedRoundedIcon from '@mui/icons-material/VerifiedRounded';
 import { alpha } from '@mui/material/styles';
 import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import { MarkdownElement } from '@mui/docs/MarkdownElement';
 import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
 import PropertiesSection from 'docs/src/modules/components/ApiPage/sections/PropertiesSection';
 import { DEFAULT_API_LAYOUT_STORAGE_KEYS } from 'docs/src/modules/components/ApiPage/sections/ToggleDisplayOption';

docs/src/modules/components/LocalizationTable.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import { Link } from '@mui/docs/Link';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import { MarkdownElement } from '@mui/docs/MarkdownElement';
 
 const Root = styled('div')(({ theme }) => ({
   position: 'relative',

docs/src/modules/components/PickersRenderingInstructions.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import Stack from '@mui/material/Stack';
 import ToggleOptions from './ToggleOptions';
 

docs/src/modules/components/SelectorsDocs.js

@@ -7,8 +7,8 @@ import AccordionDetails from '@mui/material/AccordionDetails';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import { MarkdownElement } from '@mui/docs/MarkdownElement';
 import allSelectors from 'docsx/pages/x/api/data-grid/selectors.json';
 
 const SelectorDetails = styled(AccordionDetails)({

package.json

@@ -86,9 +86,9 @@
     "@emotion/styled": "^11.11.0",
     "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
     "@mui/icons-material": "^5.15.14",
-    "@mui/internal-markdown": "^1.0.0",
+    "@mui/internal-markdown": "^1.0.3",
     "@mui/material": "^5.15.14",
-    "@mui/monorepo": "github:mui/material-ui#e1d94d5ce097815bcd738352e69bb43ce03bd266",
+    "@mui/monorepo": "github:mui/material-ui#afffc2ffc3db1e6abf48f3b3e13a41e8b758f874",
     "@mui/utils": "^5.15.14",
     "@next/eslint-plugin-next": "14.0.4",
     "@octokit/plugin-retry": "^6.0.1",
@@ -197,8 +197,7 @@
     "patchedDependencies": {
       "[email protected]": "patches/[email protected]",
       "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]",
-      "@mui/[email protected]": "patches/@[email protected]"
+      "[email protected]": "patches/[email protected]"
     }
   }
 }

tsconfig.json

@@ -28,6 +28,8 @@
       "@mui/x-tree-view-pro/*": ["./packages/x-tree-view-pro/src/*"],
       "@mui/x-license": ["./packages/x-license/src"],
       "@mui/x-license/*": ["./packages/x-license/src/*"],
+      "@mui/docs": ["./node_modules/@mui/monorepo/packages/mui-docs/src"],
+      "@mui/docs/*": ["./node_modules/@mui/monorepo/packages/mui-docs/src/*"],
       "@mui-internal/test-utils": ["./node_modules/@mui/monorepo/packages/test-utils/src"],
       "@mui-internal/test-utils/*": ["./node_modules/@mui/monorepo/packages/test-utils/src/*"],
       "@mui-internal/api-docs-builder": ["./node_modules/@mui/monorepo/packages/api-docs-builder"],