[docs] Add a recipe limiting to one expanded detail panel at a time

docs/data/data-grid/master-detail/master-detail.md

@@ -157,6 +157,12 @@ Notice that the toggle column is pinned to make sure that it will always be visi
 
 {{"demo": "FullWidthDetailPanel.js", "bg": "inline", "defaultCodeOpen": false}}
 
+## Recipes
+
+More examples of how to customize the detail panel:
+
+- [One expanded detail panel at a time](/x/react-data-grid/row-recipes/#one-expanded-detail-panel-at-a-time)
+
 ## apiRef
 
 The grid exposes a set of methods that enables all of these features using the imperative `apiRef`. To know more about how to use it, check the [API Object](/x/react-data-grid/api-object/) section.

docs/data/data-grid/row-recipes/DetailPanelOneExpandedRow.js

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import {
+  randomCreatedDate,
+  randomCurrency,
+  randomEmail,
+  randomPrice,
+} from '@mui/x-data-grid-generator';
+
+const getDetailPanelContent = ({ row }) => (
+  <Box sx={{ p: 2 }}>{`Order #${row.id}`}</Box>
+);
+const getDetailPanelHeight = () => 50;
+
+export default function DetailPanelOneExpandedRow() {
+  const [detailPanelExpandedRowIds, setDetailPanelExpandedRowIds] = React.useState(
+    [],
+  );
+
+  const handleDetailPanelExpandedRowIdsChange = React.useCallback((newIds) => {
+    setDetailPanelExpandedRowIds(
+      newIds.length > 1 ? [newIds[newIds.length - 1]] : newIds,
+    );
+  }, []);
+
+  return (
+    <Box sx={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        rows={rows}
+        columns={columns}
+        getDetailPanelContent={getDetailPanelContent}
+        getDetailPanelHeight={getDetailPanelHeight}
+        detailPanelExpandedRowIds={detailPanelExpandedRowIds}
+        onDetailPanelExpandedRowIdsChange={handleDetailPanelExpandedRowIdsChange}
+      />
+    </Box>
+  );
+}
+
+const columns = [
+  { field: 'id', headerName: 'Order ID' },
+  { field: 'customer', headerName: 'Customer', width: 200 },
+  { field: 'date', type: 'date', headerName: 'Placed at' },
+  { field: 'currency', headerName: 'Currency' },
+  { field: 'total', type: 'number', headerName: 'Total' },
+];
+
+const rows = [
+  {
+    id: 1,
+    customer: 'Matheus',
+    email: randomEmail(),
+    date: randomCreatedDate(),
+    currency: randomCurrency(),
+    total: randomPrice(1, 1000),
+  },
+  {
+    id: 2,
+    customer: 'Olivier',
+    email: randomEmail(),
+    date: randomCreatedDate(),
+    currency: randomCurrency(),
+    total: randomPrice(1, 1000),
+  },
+  {
+    id: 3,
+    customer: 'Flavien',
+    email: randomEmail(),
+    date: randomCreatedDate(),
+    currency: randomCurrency(),
+    total: randomPrice(1, 1000),
+  },
+  {
+    id: 4,
+    customer: 'Danail',
+    email: randomEmail(),
+    date: randomCreatedDate(),
+    currency: randomCurrency(),
+    total: randomPrice(1, 1000),
+  },
+  {
+    id: 5,
+    customer: 'Alexandre',
+    email: randomEmail(),
+    date: randomCreatedDate(),
+    currency: randomCurrency(),
+    total: randomPrice(1, 1000),
+  },
+];

docs/data/data-grid/row-recipes/DetailPanelOneExpandedRow.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import {
+  DataGridPro,
+  DataGridProProps,
+  GridRowsProp,
+  GridRowId,
+  GridColDef,
+} from '@mui/x-data-grid-pro';
+import {
+  randomCreatedDate,
+  randomCurrency,
+  randomEmail,
+  randomPrice,
+} from '@mui/x-data-grid-generator';
+
+const getDetailPanelContent: DataGridProProps['getDetailPanelContent'] = ({
+  row,
+}) => <Box sx={{ p: 2 }}>{`Order #${row.id}`}</Box>;
+const getDetailPanelHeight: DataGridProProps['getDetailPanelHeight'] = () => 50;
+
+export default function DetailPanelOneExpandedRow() {
+  const [detailPanelExpandedRowIds, setDetailPanelExpandedRowIds] = React.useState<
+    GridRowId[]
+  >([]);
+
+  const handleDetailPanelExpandedRowIdsChange = React.useCallback(
+    (newIds: GridRowId[]) => {
+      setDetailPanelExpandedRowIds(
+        newIds.length > 1 ? [newIds[newIds.length - 1]] : newIds,
+      );
+    },
+    [],
+  );
+
+  return (
+    <Box sx={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        rows={rows}
+        columns={columns}
+        getDetailPanelContent={getDetailPanelContent}
+        getDetailPanelHeight={getDetailPanelHeight}
+        detailPanelExpandedRowIds={detailPanelExpandedRowIds}
+        onDetailPanelExpandedRowIdsChange={handleDetailPanelExpandedRowIdsChange}
+      />
+    </Box>
+  );
+}
+
+const columns: GridColDef[] = [
+  { field: 'id', headerName: 'Order ID' },
+  { field: 'customer', headerName: 'Customer', width: 200 },
+  { field: 'date', type: 'date', headerName: 'Placed at' },
+  { field: 'currency', headerName: 'Currency' },
+  { field: 'total', type: 'number', headerName: 'Total' },
+];
+
+const rows: GridRowsProp = [
+  {
+    id: 1,
+    customer: 'Matheus',
+    email: randomEmail(),
+    date: randomCreatedDate(),
+    currency: randomCurrency(),
+    total: randomPrice(1, 1000),
+  },
+  {
+    id: 2,
+    customer: 'Olivier',
+    email: randomEmail(),
+    date: randomCreatedDate(),
+    currency: randomCurrency(),
+    total: randomPrice(1, 1000),
+  },
+  {
+    id: 3,
+    customer: 'Flavien',
+    email: randomEmail(),
+    date: randomCreatedDate(),
+    currency: randomCurrency(),
+    total: randomPrice(1, 1000),
+  },
+  {
+    id: 4,
+    customer: 'Danail',
+    email: randomEmail(),
+    date: randomCreatedDate(),
+    currency: randomCurrency(),
+    total: randomPrice(1, 1000),
+  },
+  {
+    id: 5,
+    customer: 'Alexandre',
+    email: randomEmail(),
+    date: randomCreatedDate(),
+    currency: randomCurrency(),
+    total: randomPrice(1, 1000),
+  },
+];

docs/data/data-grid/row-recipes/DetailPanelOneExpandedRow.tsx.preview

@@ -0,0 +1,8 @@
+<DataGridPro
+  rows={rows}
+  columns={columns}
+  getDetailPanelContent={getDetailPanelContent}
+  getDetailPanelHeight={getDetailPanelHeight}
+  detailPanelExpandedRowIds={detailPanelExpandedRowIds}
+  onDetailPanelExpandedRowIdsChange={handleDetailPanelExpandedRowIdsChange}
+/>

docs/data/data-grid/row-recipes/row-recipes.md

@@ -0,0 +1,15 @@
+---
+title: Data Grid - Row customization recipes
+---
+
+# Data Grid - Row customization recipes
+
+<p class="description">Advanced row customization recipes.</p>
+
+## One expanded detail panel at a time
+
+By default, the [Master detail <span class="plan-pro" />](/x/react-data-grid/master-detail/) feature supports multiple expanded detail panels simultaneously.
+
+However, you can [control the expanded detail panels](/x/react-data-grid/master-detail/#controlling-expanded-detail-panels) to have only one detail panel expanded at a time.
+
+{{"demo": "DetailPanelOneExpandedRow.js", "bg": "inline", "defaultCodeOpen": false}}

docs/data/pages.ts

@@ -63,6 +63,7 @@ const pages: MuiPage[] = [
           { pathname: '/x/react-data-grid/master-detail', plan: 'pro' },
           { pathname: '/x/react-data-grid/row-ordering', plan: 'pro' },
           { pathname: '/x/react-data-grid/row-pinning', plan: 'pro' },
+          { pathname: '/x/react-data-grid/row-recipes', title: 'Recipes' },
         ],
       },
       { pathname: '/x/react-data-grid/editing' },

docs/pages/x/react-data-grid/row-recipes.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docsx/data/data-grid/row-recipes/row-recipes.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}