Merge branch 'next' of https://github.com/mui-org/material-ui-x into …

…migrate-to-system

.github/ISSUE_TEMPLATE/1.bug.yml

@@ -64,6 +64,6 @@ body:
   - type: input
     id: contact
     attributes:
-      label: Order ID 💳 (optional)
-      description: The [Pro plan](https://mui.com/pricing/) comes with priority over the Community plan. Providing your order ID might give your problem more attention.
+      label: Order ID or Support key 💳 (optional)
+      description: The [Pro plan](https://mui.com/pricing/) comes with priority over the Community plan. Providing your order ID (or support key) gives your problem more attention.
       placeholder: 'e.g. 11111'

.github/ISSUE_TEMPLATE/3.pro-support.yml

@@ -12,7 +12,7 @@ body:
   - type: input
     id: contact
     attributes:
-      label: Order ID 💳
+      label: Order ID or Support key 💳 (optional)
       description: The order ID of the purchased Pro plan. Community users can [learn more about support](https://mui.com/getting-started/support/) in the documentation.
       placeholder: 'e.g. 11111'
     validations:

.github/ISSUE_TEMPLATE/4.premium-support.yml

@@ -12,7 +12,7 @@ body:
   - type: input
     id: contact
     attributes:
-      label: Order ID 💳
+      label: Order ID or Support key 💳 (optional)
       description: The order ID of the purchased Premium plan. Community users can [learn more about support](https://mui.com/getting-started/support/) in the documentation.
       placeholder: 'e.g. 11111'
     validations:

CHANGELOG.md

@@ -1518,7 +1518,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
   The renamed props are the following:
 
   | Old name                   | New name                      |
-  | -------------------------- | ----------------------------- |
+  | :------------------------- | :---------------------------- |
   | `selectionModel`           | `rowSelectionModel`           |
   | `onSelectionModelChange`   | `onRowSelectionModelChange`   |
   | `disableSelectionOnClick`  | `disableRowSelectionOnClick`  |
@@ -2105,7 +2105,7 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
   You can now use the `localText` prop available on all picker components:
 
   | Removed prop                 | Property in the new `localText` prop                                              |
-  | ---------------------------- | --------------------------------------------------------------------------------- |
+  | :--------------------------- | :-------------------------------------------------------------------------------- |
   | `endText`                    | `end`                                                                             |
   | `getClockLabelText`          | `clockLabelText`                                                                  |
   | `getHoursClockNumberText`    | `hoursClockNumberText`                                                            |
@@ -4190,7 +4190,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
   Here are the new names and the modifications needed to get the same information with the new selectors.
 
   | Old name                        | New name                                  |
-  | ------------------------------- | ----------------------------------------- |
+  | :------------------------------ | :---------------------------------------- |
   | `allGridColumnsFieldsSelector`  | `gridColumnFieldsSelector`                |
   | `allGridColumnsSelector`        | `gridColumnDefinitionsSelector`           |
   | `visibleGridColumnsSelector`    | `gridVisibleColumnDefinitionsSelector`    |

babel.config.js

@@ -15,6 +15,7 @@ const defaultAlias = {
   '@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',
+  '@mui-internal/docs-utilities': '@mui/monorepo/packages/docs-utilities',
   'typescript-to-proptypes': '@mui/monorepo/packages/typescript-to-proptypes/src',
   docs: resolveAliasPath('./node_modules/@mui/monorepo/docs'),
   test: resolveAliasPath('./test'),

dangerfile.js

@@ -1,4 +1,4 @@
-const { markdown, message } = require('danger');
+const { danger, markdown } = require('danger');
 const fse = require('fs-extra');
 const path = require('path');
 const prettier = require('prettier');
@@ -35,9 +35,51 @@ ${headers}\n`;
   markdown(prettier.format(text, { prettierConfig, parser: 'markdown' }));
 }
 
+function addDeployPreviewUrls() {
+  /**
+   * The incoming docsPath from danger does not start with `/`
+   * e.g. ['docs/data/data-grid/editing/editing.md']
+   */
+  function formatFileToLink(docsPath) {
+    const url = docsPath.replace('docs/data', 'x/').replace(/\/[^/]+\.md$/, '/');
+
+    return url
+      .replace('data-grid/', 'react-data-grid/')
+      .replace('date-pickers/', 'react-date-pickers/')
+      .replace(/\/[^/]+\.md$/, '/');
+  }
+
+  const netlifyPreview = `https://deploy-preview-${danger.github.pr.number}--material-ui-x.netlify.app/`;
+
+  const files = [...danger.git.created_files, ...danger.git.modified_files];
+
+  // limit to the first 5 docs
+  const docs = files
+    .filter((file) => file.startsWith('docs/data') && file.endsWith('.md'))
+    .slice(0, 5);
+
+  markdown(`
+## Netlify deploy preview
+
+Netlify deploy preview: <a href="${netlifyPreview}">${netlifyPreview}</a>
+
+### Updated pages
+
+${
+  docs.length
+    ? docs
+        .map((docsPath) => {
+          const formattedUrl = formatFileToLink(docsPath);
+          return `- [${docsPath}](${netlifyPreview}${formattedUrl})`;
+        })
+        .join('\n')
+    : 'No updates.'
+}
+`);
+}
+
 async function run() {
-  const netlifyPreview = `https://deploy-preview-${process.env.CIRCLE_PR_NUMBER}--material-ui-x.netlify.app/`;
-  message(`Netlify deploy preview: <a href="${netlifyPreview}">${netlifyPreview}</a>`);
+  addDeployPreviewUrls();
 
   switch (dangerCommand) {
     case 'reportPerformance':

docs/babel.config.js

@@ -11,6 +11,7 @@ const alias = {
   '@mui/docs': '../node_modules/@mui/monorepo/packages/mui-docs/src',
   '@mui/markdown': '../node_modules/@mui/monorepo/packages/markdown',
   '@mui/monorepo': '../node_modules/@mui/monorepo',
+  '@mui-internal/docs-utilities': '../node_modules/@mui/monorepo/packages/docs-utilities',
   '@mui/joy': '../node_modules/@mui/monorepo/packages/mui-joy/src',
   docs: '../node_modules/@mui/monorepo/docs',
   docsx: './',

docs/data/data-grid/accessibility/accessibility.md

@@ -6,14 +6,17 @@
 
 The most commonly encountered conformance guidelines for accessibility are:
 
-- [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) - Globally accepted standard
-- [ADA](https://www.ada.gov/) - US Department of Justice
-- [Section 508](https://www.section508.gov/) - US federal agencies
+- Globally accepted standard: [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/)
+- US:
+  - [ADA](https://www.ada.gov/) - US Department of Justice
+  - [Section 508](https://www.section508.gov/) - US federal agencies
+- Europe: [EAA](https://ec.europa.eu/social/main.jsp?catId=1202) (European Accessibility Act)
 
-WCAG 2.0 has three levels of conformance: A, AA, and AAA.
-Level AA matches the ADA and Section 508 guidelines, so this is the most common target for organizations to aim for.
+WCAG 2.1 has three levels of conformance: A, AA, and AAA.
+Level AA meet the most commonly encountered conformance guidelines.
+This is the most common target for organizations so what MUI aims to support very well.
 
-The [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) provide valuable information on how to optimize the accessibility of a grid.
+The [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) provide valuable information on how to optimize the accessibility of a data grid.
 
 ## Density
 

docs/data/data-grid/components/CustomFooter.js

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import { useDemoData } from '@mui/x-data-grid-generator';
 import { DataGrid } from '@mui/x-data-grid';
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 
-function CustomFooterStatusComponent(props) {
+export function CustomFooterStatusComponent(props) {
   return (
     <Box sx={{ p: 1, display: 'flex' }}>
       <FiberManualRecordIcon
@@ -21,12 +20,6 @@ function CustomFooterStatusComponent(props) {
   );
 }
 
-CustomFooterStatusComponent.propTypes = {
-  status: PropTypes.oneOf(['connected', 'disconnected']).isRequired,
-};
-
-export { CustomFooterStatusComponent };
-
 export default function CustomFooter() {
   const [status, setStatus] = React.useState('connected');
   const { data } = useDemoData({

docs/data/data-grid/components/CustomFooter.tsx

@@ -2,12 +2,20 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import { useDemoData } from '@mui/x-data-grid-generator';
-import { DataGrid } from '@mui/x-data-grid';
+import { DataGrid, GridSlotsComponentsProps } from '@mui/x-data-grid';
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 
-export function CustomFooterStatusComponent(props: {
-  status: 'connected' | 'disconnected';
-}) {
+type FooterStatus = 'connected' | 'disconnected';
+
+declare module '@mui/x-data-grid' {
+  interface FooterPropsOverrides {
+    status: FooterStatus;
+  }
+}
+
+export function CustomFooterStatusComponent(
+  props: NonNullable<GridSlotsComponentsProps['footer']>,
+) {
   return (
     <Box sx={{ p: 1, display: 'flex' }}>
       <FiberManualRecordIcon
@@ -23,7 +31,7 @@ export function CustomFooterStatusComponent(props: {
 }
 
 export default function CustomFooter() {
-  const [status, setStatus] = React.useState('connected');
+  const [status, setStatus] = React.useState<FooterStatus>('connected');
   const { data } = useDemoData({
     dataSet: 'Employee',
     rowLength: 4,

docs/data/data-grid/components/components.md

@@ -62,7 +62,7 @@ function CustomPagination() {
 }
 ```
 
-## Components
+## Component slots
 
 The full list of overridable components slots can be found on the [`GridSlotsComponent`](/x/api/data-grid/data-grid/#slots) API page.
 
@@ -72,25 +72,6 @@ As mentioned above, the column menu is a component slot that can be recomposed e
 
 {{"demo": "CustomColumnMenu.js", "bg": "inline"}}
 
-Below is the default `GridColumnMenu`.
-
-```tsx
-export const GridColumnMenu = React.forwardRef<
-  HTMLUListElement,
-  GridColumnMenuProps
->(function GridColumnMenu(props: GridColumnMenuProps, ref) {
-  const { hideMenu, colDef } = props;
-
-  return (
-    <GridColumnMenuContainer ref={ref} {...props}>
-      <GridColumnMenuSortItem onClick={hideMenu} colDef={colDef} />
-      <GridColumnMenuFilterItem onClick={hideMenu} colDef={colDef} />
-      <GridColumnMenuColumnsItem onClick={hideMenu} colDef={colDef} />
-    </GridColumnMenuContainer>
-  );
-});
-```
-
 ### Toolbar
 
 To enable the toolbar you need to add the `toolbar: GridToolbar` to the grid `slots` prop.
@@ -174,6 +155,63 @@ As any component slot, every icon can be customized. However, it is not yet poss
 
 {{"demo": "CustomSortIcons.js", "bg": "inline"}}
 
+## Slot props
+
+To override default props or pass custom props to slot components, use the `slotProps` prop.
+
+```tsx
+<DataGrid
+  slotProps={{
+    toolbar: {
+      // override default props
+      disableDensitySelector: true,
+    }
+  }}
+>
+```
+
+### Custom slot props with TypeScript
+
+If the custom component requires additional props to work properly, TypeScript may throw type errors. To prevent, use [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) to enhance the props interface.
+
+The naming of overridable interfaces uses a pattern like this:
+
+```js
+`${slotNameInPascalCase}PropsOverrides`;
+```
+
+For example, for `columnMenu` slot, the interface name would be `ColumnMenuPropsOverrides`.
+
+This [file](https://github.com/mui/mui-x/blob/-/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts) lists all the interfaces for each slot which could be used for augmentation.
+
+```tsx
+// augment the props for `toolbar` slot
+declare module '@mui/x-data-grid' {
+  interface ToolbarPropsOverrides {
+    someCustomString: string;
+    someCustomNumber: number;
+  }
+}
+
+<DataGrid
+  slots={{
+    // custom component passed to the `toolbar` slot
+    toolbar: CustomGridToolbar,
+  }}
+  slotProps={{
+    toolbar: {
+      // props required by `CustomGridToolbar`
+      someCustomString: 'Hello',
+      someCustomNumber: 42,
+    },
+  }}
+>
+```
+
+This demo below shows how to use the `slotProps` prop and module augmentation to pass a new prop `status` to the `footer` slot.
+
+{{"demo": "CustomFooter.js", "bg": "inline"}}
+
 ## API
 
 - [DataGrid](/x/api/data-grid/data-grid/)