mui · cherniavskii · Feb 9, 2023 · Feb 7, 2023 · Feb 7, 2023 · Feb 7, 2023
diff --git a/babel.config.js b/babel.config.js
@@ -14,6 +14,7 @@ const defaultAlias = {
   '@mui/x-license-pro': resolveAliasPath('./packages/x-license-pro/src'),
   '@mui/x-date-pickers': resolveAliasPath('./packages/x-date-pickers/src'),
   '@mui/x-date-pickers-pro': resolveAliasPath('./packages/x-date-pickers-pro/src'),
+  '@mui/markdown': '@mui/monorepo/packages/markdown',
   'typescript-to-proptypes': '@mui/monorepo/packages/typescript-to-proptypes/src',
   docs: resolveAliasPath('./node_modules/@mui/monorepo/docs'),
   test: resolveAliasPath('./test'),

diff --git a/docs/babel.config.js b/docs/babel.config.js
@@ -9,7 +9,7 @@ const alias = {
   '@mui/x-date-pickers-pro': '../packages/x-date-pickers-pro/src',
   '@mui/x-license-pro': '../packages/x-license-pro/src',
   '@mui/docs': '../node_modules/@mui/monorepo/packages/mui-docs/src',
-  '@mui/markdown': '../node_modules/@mui/monorepo/docs/packages/markdown',
+  '@mui/markdown': '../node_modules/@mui/monorepo/packages/markdown',
   '@mui/monorepo': '../node_modules/@mui/monorepo',
   '@mui/joy': '../node_modules/@mui/monorepo/packages/mui-joy/src',
   docs: '../node_modules/@mui/monorepo/docs', // TODO remove

diff --git a/docs/config.js b/docs/config.js
@@ -0,0 +1 @@
+module.exports = require('@mui/monorepo/docs/config');
diff --git a/docs/data/date-pickers/date-field/CustomUIDateField.js b/docs/data/date-pickers/date-field/CustomUIDateField.js
@@ -1,33 +1,20 @@
 import * as React from 'react';
 import dayjs from 'dayjs';
-import { CssVarsProvider } from '@mui/joy/styles';
 import Stack from '@mui/material/Stack';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import FormLabel from '@mui/joy/FormLabel';
-import JoyTextField from '@mui/joy/TextField';
+import FormLabel from '@mui/material/FormLabel';
 import InputUnstyled from '@mui/base/InputUnstyled';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
 
-const JoyDateField = (props) => {
-  const { inputRef, inputProps } = useDateField(props);
-
-  return (
-    <JoyTextField
-      {...inputProps}
-      componentsProps={{ input: { componentsProps: { input: { ref: inputRef } } } }}
-    />
-  );
-};
-
 const UnstyledDateField = (props) => {
   const { inputRef, inputProps } = useDateField(props);
 
   return (
     <InputUnstyled
       {...inputProps}
-      componentsProps={{ input: { ref: inputRef, style: { width: '100%' } } }}
+      slotProps={{ input: { ref: inputRef, style: { width: '100%' } } }}
     />
   );
 };
@@ -47,28 +34,21 @@ export default function CustomUIDateField() {
   const handleChange = (newValue) => setValue(newValue);
 
   return (
-    <CssVarsProvider>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <Stack spacing={2}>
-          <JoyDateField
-            label="Using @mui/joy TextField"
-            value={value}
-            onChange={handleChange}
-          />
-          <FormControlLabel
-            label={<FormLabel>Using unstyled input</FormLabel>}
-            control={<UnstyledDateField value={value} onChange={handleChange} />}
-            labelPlacement="top"
-            sx={{ alignItems: 'stretch' }}
-          />
-          <FormControlLabel
-            label={<FormLabel>Using browser input</FormLabel>}
-            control={<BrowserInputDateField value={value} onChange={handleChange} />}
-            labelPlacement="top"
-            sx={{ alignItems: 'stretch' }}
-          />
-        </Stack>
-      </LocalizationProvider>
-    </CssVarsProvider>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={2}>
+        <FormControlLabel
+          label={<FormLabel>Using unstyled input</FormLabel>}
+          control={<UnstyledDateField value={value} onChange={handleChange} />}
+          labelPlacement="top"
+          sx={{ alignItems: 'stretch' }}
+        />
+        <FormControlLabel
+          label={<FormLabel>Using browser input</FormLabel>}
+          control={<BrowserInputDateField value={value} onChange={handleChange} />}
+          labelPlacement="top"
+          sx={{ alignItems: 'stretch' }}
+        />
+      </Stack>
+    </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/date-field/CustomUIDateField.tsx b/docs/data/date-pickers/date-field/CustomUIDateField.tsx
@@ -1,12 +1,8 @@
 import * as React from 'react';
 import dayjs, { Dayjs } from 'dayjs';
-import { CssVarsProvider } from '@mui/joy/styles';
 import Stack from '@mui/material/Stack';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import FormLabel from '@mui/joy/FormLabel';
-import JoyTextField, {
-  TextFieldProps as JoyTextFieldProps,
-} from '@mui/joy/TextField';
+import FormLabel from '@mui/material/FormLabel';
 import InputUnstyled, { InputUnstyledProps } from '@mui/base/InputUnstyled';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
@@ -15,21 +11,6 @@ import {
   UseDateFieldComponentProps,
 } from '@mui/x-date-pickers/DateField';
 
-type JoyDateFieldProps = UseDateFieldComponentProps<Dayjs, Dayjs, JoyTextFieldProps>;
-
-const JoyDateField = (props: JoyDateFieldProps) => {
-  const { inputRef, inputProps } = useDateField<Dayjs, Dayjs, JoyDateFieldProps>(
-    props,
-  );
-
-  return (
-    <JoyTextField
-      {...inputProps}
-      componentsProps={{ input: { componentsProps: { input: { ref: inputRef } } } }}
-    />
-  );
-};
-
 type UnstyledDateFieldProps = UseDateFieldComponentProps<
   Dayjs,
   Dayjs,
@@ -46,7 +27,7 @@ const UnstyledDateField = (props: UnstyledDateFieldProps) => {
   return (
     <InputUnstyled
       {...(inputProps as InputUnstyledProps)}
-      componentsProps={{ input: { ref: inputRef, style: { width: '100%' } } }}
+      slotProps={{ input: { ref: inputRef, style: { width: '100%' } } }}
     />
   );
 };
@@ -72,28 +53,21 @@ export default function CustomUIDateField() {
   const handleChange = (newValue: Dayjs | null) => setValue(newValue);
 
   return (
-    <CssVarsProvider>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <Stack spacing={2}>
-          <JoyDateField
-            label="Using @mui/joy TextField"
-            value={value}
-            onChange={handleChange}
-          />
-          <FormControlLabel
-            label={<FormLabel>Using unstyled input</FormLabel>}
-            control={<UnstyledDateField value={value} onChange={handleChange} />}
-            labelPlacement="top"
-            sx={{ alignItems: 'stretch' }}
-          />
-          <FormControlLabel
-            label={<FormLabel>Using browser input</FormLabel>}
-            control={<BrowserInputDateField value={value} onChange={handleChange} />}
-            labelPlacement="top"
-            sx={{ alignItems: 'stretch' }}
-          />
-        </Stack>
-      </LocalizationProvider>
-    </CssVarsProvider>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={2}>
+        <FormControlLabel
+          label={<FormLabel>Using unstyled input</FormLabel>}
+          control={<UnstyledDateField value={value} onChange={handleChange} />}
+          labelPlacement="top"
+          sx={{ alignItems: 'stretch' }}
+        />
+        <FormControlLabel
+          label={<FormLabel>Using browser input</FormLabel>}
+          control={<BrowserInputDateField value={value} onChange={handleChange} />}
+          labelPlacement="top"
+          sx={{ alignItems: 'stretch' }}
+        />
+      </Stack>
+    </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/date-field/CustomUIDateField.tsx.preview b/docs/data/date-pickers/date-field/CustomUIDateField.tsx.preview
@@ -0,0 +1,16 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <Stack spacing={2}>
+    <FormControlLabel
+      label={<FormLabel>Using unstyled input</FormLabel>}
+      control={<UnstyledDateField value={value} onChange={handleChange} />}
+      labelPlacement="top"
+      sx={{ alignItems: 'stretch' }}
+    />
+    <FormControlLabel
+      label={<FormLabel>Using browser input</FormLabel>}
+      control={<BrowserInputDateField value={value} onChange={handleChange} />}
+      labelPlacement="top"
+      sx={{ alignItems: 'stretch' }}
+    />
+  </Stack>
+</LocalizationProvider>
diff --git a/docs/data/pages.ts b/docs/data/pages.ts
@@ -2,8 +2,8 @@ import type { MuiPage } from '@mui/monorepo/docs/src/MuiPage';
 
 const pages: MuiPage[] = [
   {
-    pathname: '/x/introduction',
-    scopePathnames: ['/x/introduction'],
+    pathname: '/x/introduction-group',
+    title: 'Introduction',
     icon: 'DescriptionIcon',
     children: [
       { pathname: `/x/introduction`, title: 'Overview' },
@@ -14,9 +14,8 @@ const pages: MuiPage[] = [
     ],
   },
   {
-    pathname: '/x/react-data-grid',
-    scopePathnames: ['/x/api/data-grid'],
-    title: 'Data grid',
+    pathname: '/x/react-data-grid-group',
+    title: 'Data Grid',
     icon: 'TableViewIcon',
     children: [
       { pathname: '/x/react-data-grid', title: 'Overview' },
@@ -26,7 +25,6 @@ const pages: MuiPage[] = [
       { pathname: '/x/react-data-grid/layout' },
       {
         pathname: '/x/react-data-grid/columns',
-        scopePathnames: ['/x/react-data-grid/column-'],
         children: [
           { pathname: '/x/react-data-grid/column-definition' },
           { pathname: '/x/react-data-grid/column-dimensions' },
@@ -40,7 +38,6 @@ const pages: MuiPage[] = [
       },
       {
         pathname: '/x/react-data-grid/rows',
-        scopePathnames: ['/x/react-data-grid/row-', '/x/react-data-grid/master-detail'],
         children: [
           { pathname: '/x/react-data-grid/row-definition' },
           { pathname: '/x/react-data-grid/row-updates' },
@@ -64,14 +61,8 @@ const pages: MuiPage[] = [
       { pathname: '/x/react-data-grid/virtualization' },
       { pathname: '/x/react-data-grid/accessibility' },
       {
-        pathname: '/x/react-data-grid/row-grouping',
+        pathname: '/x/react-data-grid-group-pivot',
         title: 'Group & Pivot',
-        scopePathnames: [
-          '/x/react-data-grid/row-grouping',
-          '/x/react-data-grid/tree-data',
-          '/x/react-data-grid/aggregation',
-          '/x/react-data-grid/pivoting',
-        ],
         children: [
           { pathname: '/x/react-data-grid/row-grouping', plan: 'premium' },
           { pathname: '/x/react-data-grid/tree-data', plan: 'pro' },
@@ -81,12 +72,7 @@ const pages: MuiPage[] = [
       },
       {
         title: 'Advanced',
-        pathname: '/x/react-data-grid/api-object',
-        scopePathnames: [
-          '/x/react-data-grid/api-object',
-          '/x/react-data-grid/events',
-          '/x/react-data-grid/state',
-        ],
+        pathname: '/x/react-data-grid/advanced',
         children: [
           { pathname: '/x/react-data-grid/api-object', title: 'API object' },
           { pathname: '/x/react-data-grid/events' },
@@ -96,14 +82,13 @@ const pages: MuiPage[] = [
       {
         title: 'Recipes',
         pathname: '/x/react-data-grid/recipes',
-        scopePathnames: ['/x/react-data-grid/recipes-'],
         children: [
           { pathname: '/x/react-data-grid/recipes-editing', title: 'Editing' },
           { pathname: '/x/react-data-grid/recipes-row-grouping', title: 'Row grouping' },
         ],
       },
       {
-        pathname: '/x/api/data-grid',
+        pathname: '/x/api/data-grid-group',
         title: 'API Reference',
         children: [
           { pathname: '/x/api/data-grid', title: 'Index' },
@@ -144,8 +129,7 @@ const pages: MuiPage[] = [
   },
   {
     pathname: '/x/react-date-pickers',
-    scopePathnames: ['/x/api/date-pickers'],
-    title: 'Date and Time pickers',
+    title: 'Date and Time Pickers',
     icon: 'DatePickerIcon',
     children: [
       { pathname: '/x/react-date-pickers/getting-started' },
@@ -170,7 +154,7 @@ const pages: MuiPage[] = [
         plan: 'pro',
       },
       {
-        pathname: '/x/api/date-pickers',
+        pathname: '/x/api/date-pickers-group',
         title: 'API Reference',
         children: [
           { pathname: '/x/api/date-pickers', title: 'Index' },

diff --git a/docs/next.config.js b/docs/next.config.js
@@ -6,7 +6,12 @@ const pkg = require('../package.json');
 const dataGridPkg = require('../packages/grid/x-data-grid/package.json');
 const datePickersPkg = require('../packages/x-date-pickers/package.json');
 const { findPages } = require('./src/modules/utils/find');
-const { LANGUAGES, LANGUAGES_SSR } = require('./src/modules/constants');
+const {
+  LANGUAGES,
+  LANGUAGES_SSR,
+  LANGUAGES_IN_PROGRESS,
+  LANGUAGES_IGNORE_PAGES,
+} = require('./config');
 
 const workspaceRoot = path.join(__dirname, '../');
 
@@ -62,7 +67,15 @@ module.exports = withDocsInfra({
             oneOf: [
               {
                 resourceQuery: /@mui\/markdown/,
-                use: require.resolve('@mui/monorepo/docs/packages/markdown/loader'),
+                use: [
+                  {
+                    loader: require.resolve('@mui/monorepo/packages/markdown/loader'),
+                    options: {
+                      ignoreLanguagePages: LANGUAGES_IGNORE_PAGES,
+                      languagesInProgress: LANGUAGES_IN_PROGRESS,
+                    },
+                  },
+                ],
               },
             ],
           },

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -201,15 +201,19 @@ function AppWrapper(props) {
     }
   }, []);
 
-  const activePage = findActivePage(pages, router.pathname);
-
   let fonts = [];
   if (router.pathname.match(/onepirate/)) {
     fonts = [
       'https://fonts.googleapis.com/css?family=Roboto+Condensed:700|Work+Sans:300,400&display=swap',
     ];
   }
 
+  const pageContextValue = React.useMemo(() => {
+    const { activePage, activePageParents } = findActivePage(pages, router.pathname);
+
+    return { activePage, activePageParents, pages };
+  }, [router.pathname]);
+
   return (
     <React.Fragment>
       <NextHead>
@@ -220,7 +224,7 @@ function AppWrapper(props) {
       <UserLanguageProvider defaultUserLanguage={pageProps.userLanguage}>
         <CodeCopyProvider>
           <CodeVariantProvider>
-            <PageContext.Provider value={{ activePage, pages }}>
+            <PageContext.Provider value={pageContextValue}>
               <ThemeProvider>
                 <DocsStyledEngineProvider cacheLtr={emotionCache}>
                   {children}

diff --git a/docs/public/static/sponsors/doit-dark.svg b/docs/public/static/sponsors/doit-dark.svg
diff --git a/docs/public/static/sponsors/doit-square.svg b/docs/public/static/sponsors/doit-square.svg
diff --git a/docs/public/static/sponsors/megafamous.png b/docs/public/static/sponsors/megafamous.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		module.exports = require('@mui/monorepo/docs/config');