From 2c06cf302ed5a6dc8e5b1c622b40dc9d570e50d7 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 23 Nov 2024 18:03:39 +0100
Subject: [PATCH] [docs] Fix 404 links

---
 docs/data/charts/heatmap/heatmap.md           |   2 +-
 docs/data/chartsApiPages.ts                   |   5 +
 .../migration-charts-v7.md                    |  23 +-
 .../migration-pickers-v6.md                   |   3 +
 .../migration-pickers-v7.md                   |  39 ++-
 .../migration-tree-view-v7.md                 |   7 +-
 docs/data/pages.ts                            |   1 -
 .../getting-started/getting-started.md        |   2 +-
 docs/data/treeViewApiPages.ts                 |   4 +
 docs/pages/x/api/charts/axis-config.json      |   8 +-
 docs/pages/x/api/charts/bar-series-type.json  |   5 +-
 docs/pages/x/api/charts/heatmap-tooltip.js    |  23 ++
 docs/pages/x/api/charts/heatmap-tooltip.json  | 135 ++++++++
 docs/pages/x/api/charts/line-series-type.json |   5 +-
 docs/pages/x/api/charts/pie-series-type.json  |   5 +-
 .../x/api/charts/scatter-series-type.json     |   5 +-
 .../x/api/tree-view/tree-item-provider.js     |  23 ++
 .../x/api/tree-view/tree-item-provider.json   |  15 +
 docs/pages/x/api/tree-view/tree-item.json     |   2 +-
 docs/scripts/createXTypeScriptProjects.ts     |   2 +-
 .../api-docs/charts/axis-config.json          |   3 +-
 .../heatmap-tooltip/heatmap-tooltip.json      |  64 ++++
 .../tree-item-provider.json                   |   1 +
 .../src/Heatmap/HeatmapTooltip.tsx            |   3 -
 .../ChartDataProviderPro.tsx                  | 318 ------------------
 .../src/TreeItemProvider/TreeItemProvider.tsx |   7 +-
 26 files changed, 343 insertions(+), 367 deletions(-)
 create mode 100644 docs/pages/x/api/charts/heatmap-tooltip.js
 create mode 100644 docs/pages/x/api/charts/heatmap-tooltip.json
 create mode 100644 docs/pages/x/api/tree-view/tree-item-provider.js
 create mode 100644 docs/pages/x/api/tree-view/tree-item-provider.json
 create mode 100644 docs/translations/api-docs/charts/heatmap-tooltip/heatmap-tooltip.json
 create mode 100644 docs/translations/api-docs/tree-view/tree-item-provider/tree-item-provider.json

diff --git a/docs/data/charts/heatmap/heatmap.md b/docs/data/charts/heatmap/heatmap.md
index f33f20a988aa..a5b6321f1e39 100644
--- a/docs/data/charts/heatmap/heatmap.md
+++ b/docs/data/charts/heatmap/heatmap.md
@@ -1,7 +1,7 @@
 ---
 title: React Heatmap chart
 productId: x-charts
-components: Heatmap, HeatmapPlot, DefaultHeatmapTooltip
+components: Heatmap, HeatmapPlot, HeatmapTooltip
 ---
 
 # Charts - Heatmap [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
diff --git a/docs/data/chartsApiPages.ts b/docs/data/chartsApiPages.ts
index 724d92693ea9..ea2fd2d5bd4f 100644
--- a/docs/data/chartsApiPages.ts
+++ b/docs/data/chartsApiPages.ts
@@ -137,6 +137,11 @@ const chartsApiPages: MuiPage[] = [
     title: 'HeatmapPlot',
     plan: 'pro',
   },
+  {
+    pathname: '/x/api/charts/heatmap-tooltip',
+    title: 'HeatmapTooltip',
+    plan: 'pro',
+  },
   {
     pathname: '/x/api/charts/line-chart',
     title: 'LineChart',
diff --git a/docs/data/migration/migration-charts-v7/migration-charts-v7.md b/docs/data/migration/migration-charts-v7/migration-charts-v7.md
index 5fe6c6f9c75e..812803e6c7ed 100644
--- a/docs/data/migration/migration-charts-v7/migration-charts-v7.md
+++ b/docs/data/migration/migration-charts-v7/migration-charts-v7.md
@@ -19,6 +19,9 @@ In `package.json`, change the version of the charts package to `next`.
 ```diff
 -"@mui/x-charts": "^7.0.0",
 +"@mui/x-charts": "next",
+
+-"@mui/x-charts-pro": "^7.0.0",
++"@mui/x-charts-pro": "next",
 ```
 
 Using `next` ensures that it will always use the latest v8 pre-release version, but you can also use a fixed version, like `8.0.0-alpha.0`.
@@ -85,8 +88,8 @@ The `legend` prop of charts single components has been removed.
 To pass props to the legend, use the `slotProps.legend`.
 
 ```diff
-- <PieChart legend={{ ... }} />
-+ <PieChart slotProps={{ legend: { ... } }} />
+-<PieChart legend={{ ... }} />
++<PieChart slotProps={{ legend: { ... } }} />
 ```
 
 ## Removing ResponsiveChartContainer ✅
@@ -95,16 +98,16 @@ The `ResponsiveChartContainer` has been removed.
 You can now use `ChartContainer` as a responsive container which works now exactly the same way.
 
 ```diff
-- import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
-- import { ResponsiveChartContainerPro } from '@mui/x-charts-pro/ResponsiveChartContainerPro';
-+ import { ChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
-+ import { ChartContainerPro } from '@mui/x-charts-pro/ResponsiveChartContainerPro';
+-import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+-import { ResponsiveChartContainerPro } from '@mui/x-charts-pro/ResponsiveChartContainerPro';
++import { ChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
++import { ChartContainerPro } from '@mui/x-charts-pro/ResponsiveChartContainerPro';
 
-- <ResponsiveChartContainer>
-+ <ChartContainer>
+-<ResponsiveChartContainer>
++<ChartContainer>
    <BarPlot />
-- </ResponsiveChartContainer>
-+ </ChartContainer>
+-</ResponsiveChartContainer>
++</ChartContainer>
 ```
 
 ## New DOM structure for ChartContainer
diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md
index bfd68f5aa844..c7d844d7d2d5 100644
--- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md
+++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md
@@ -18,6 +18,9 @@ In `package.json`, change the version of the date pickers package to `^7.0.0`.
 ```diff
 -"@mui/x-date-pickers": "^6.0.0",
 +"@mui/x-date-pickers": "^7.0.0",
+
+-"@mui/x-date-pickers-pro": "^6.0.0",
++"@mui/x-date-pickers-pro": "^7.0.0",
 ```
 
 Since `v7` is a major release, it contains changes that affect the public API.
diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
index 5ab0f1392e68..28e9c92b1613 100644
--- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
+++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
@@ -17,6 +17,9 @@ In `package.json`, change the version of the date pickers package to `next`.
 ```diff
 -"@mui/x-date-pickers": "7.x.x",
 +"@mui/x-date-pickers": "next",
+
+-"@mui/x-date-pickers-pro": "7.x.x",
++"@mui/x-date-pickers-pro": "next",
 ```
 
 Using `next` ensures that it will always use the latest v8 pre-release version, but you can also use a fixed version, like `8.0.0-alpha.0`.
@@ -303,34 +306,34 @@ The following variables were renamed to have a coherent `Picker` / `Pickers` pre
 - `usePickersTranslations`
 
   ```diff
-  - import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
-  - import { usePickersTranslations } from '@mui/x-date-pickers';
-  - import { usePickersTranslations } from '@mui/x-date-pickers-pro';
+  -import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+  -import { usePickersTranslations } from '@mui/x-date-pickers';
+  -import { usePickersTranslations } from '@mui/x-date-pickers-pro';
 
-  + import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
-  + import { usePickerTranslations } from '@mui/x-date-pickers';
-  + import { usePickerTranslations } from '@mui/x-date-pickers-pro';
+  +import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+  +import { usePickerTranslations } from '@mui/x-date-pickers';
+  +import { usePickerTranslations } from '@mui/x-date-pickers-pro';
 
-  - const translations = usePickersTranslations();
-  + const translations = usePickerTranslations();
+  -const translations = usePickersTranslations();
+  +const translations = usePickerTranslations();
   ```
 
-  - `usePickersContext`
+- `usePickersContext`
 
   ```diff
-  - import { usePickersContext } from '@mui/x-date-pickers/hooks';
-  - import { usePickersContext } from '@mui/x-date-pickers';
-  - import { usePickersContext } from '@mui/x-date-pickers-pro';
+  -import { usePickersContext } from '@mui/x-date-pickers/hooks';
+  -import { usePickersContext } from '@mui/x-date-pickers';
+  -import { usePickersContext } from '@mui/x-date-pickers-pro';
 
-  + import { usePickerContext } from '@mui/x-date-pickers/hooks';
-  + import { usePickerContext } from '@mui/x-date-pickers';
-  + import { usePickerContext } from '@mui/x-date-pickers-pro';
+  +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+  +import { usePickerContext } from '@mui/x-date-pickers';
+  +import { usePickerContext } from '@mui/x-date-pickers-pro';
 
-  - const pickersContext = usePickersContext();
-  + const pickerContext = usePickerContext();
+  -const pickersContext = usePickersContext();
+  +const pickerContext = usePickerContext();
   ```
 
-  - `FieldValueType`
+- `FieldValueType`
 
   ```diff
   -import { FieldValueType } from '@mui/x-date-pickers/models';
diff --git a/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md b/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md
index 4420a0b036ae..8b445e0b0be9 100644
--- a/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md
+++ b/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md
@@ -17,6 +17,9 @@ In `package.json`, change the version of the Tree View package to `next`.
 ```diff
 -"@mui/x-tree-view": "7.x.x",
 +"@mui/x-tree-view": "next",
+
+-"@mui/x-tree-view-pro": "7.x.x",
++"@mui/x-tree-view-pro": "next",
 ```
 
 Using `next` ensures that it will always use the latest v8 pre-release version, but you can also use a fixed version, like `8.0.0-alpha.0`.
@@ -126,9 +129,9 @@ This inconsistency has been solved, all the event manager now target the root of
 
 ```diff
 -<SimpleTreeView>
-+<SimpleTreeView onItemClick={handleItemClick}>
 -  <TreeItem onClick={handleItemClick}>
-+  <TreeItem >
++<SimpleTreeView onItemClick={handleItemClick}>
++  <TreeItem>
  </SimpleTreeView>
 ```
 
diff --git a/docs/data/pages.ts b/docs/data/pages.ts
index e3810ebd7004..869209d6b5f8 100644
--- a/docs/data/pages.ts
+++ b/docs/data/pages.ts
@@ -130,7 +130,6 @@ const pages: MuiPage[] = [
           { pathname: '/x/react-data-grid/export' },
           { pathname: '/x/react-data-grid/clipboard', title: 'Copy and paste', newFeature: true },
           { pathname: '/x/react-data-grid/scrolling' },
-
           {
             pathname: '/x/react-data-grid/list-view',
             title: 'List view',
diff --git a/docs/data/tree-view/getting-started/getting-started.md b/docs/data/tree-view/getting-started/getting-started.md
index bc146ab1f18f..fc3bca0bdd08 100644
--- a/docs/data/tree-view/getting-started/getting-started.md
+++ b/docs/data/tree-view/getting-started/getting-started.md
@@ -1,7 +1,7 @@
 ---
 productId: x-tree-view
 title: Tree View - Getting started
-components: SimpleTreeView, RichTreeView, TreeItem, TreeView
+components: SimpleTreeView, RichTreeView
 packageName: '@mui/x-tree-view'
 githubLabel: 'component: tree view'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
diff --git a/docs/data/treeViewApiPages.ts b/docs/data/treeViewApiPages.ts
index c68f64fdefcc..d60b19a35529 100644
--- a/docs/data/treeViewApiPages.ts
+++ b/docs/data/treeViewApiPages.ts
@@ -26,5 +26,9 @@ const treeViewApiPages: MuiPage[] = [
     pathname: '/x/api/tree-view/tree-item-icon',
     title: 'TreeItemIcon',
   },
+  {
+    pathname: '/x/api/tree-view/tree-item-provider',
+    title: 'TreeItemProvider',
+  },
 ];
 export default treeViewApiPages;
diff --git a/docs/pages/x/api/charts/axis-config.json b/docs/pages/x/api/charts/axis-config.json
index 930aac071102..d5d5f7117ac4 100644
--- a/docs/pages/x/api/charts/axis-config.json
+++ b/docs/pages/x/api/charts/axis-config.json
@@ -1,6 +1,9 @@
 {
   "name": "AxisConfig",
-  "imports": ["import { AxisConfig } from '@mui/x-charts'"],
+  "imports": [
+    "import { AxisConfig } from '@mui/x-charts-pro'",
+    "import { AxisConfig } from '@mui/x-charts'"
+  ],
   "properties": {
     "id": { "type": { "description": "AxisId" }, "required": true },
     "scaleType": { "type": { "description": "'band'" }, "required": true },
@@ -32,6 +35,7 @@
     },
     "valueFormatter": {
       "type": { "description": "(value: V, context: AxisValueFormatterContext) =&gt; string" }
-    }
+    },
+    "zoom": { "type": { "description": "boolean | ZoomOptions" }, "isProPlan": true }
   }
 }
diff --git a/docs/pages/x/api/charts/bar-series-type.json b/docs/pages/x/api/charts/bar-series-type.json
index 29c14e4317f7..de9972728689 100644
--- a/docs/pages/x/api/charts/bar-series-type.json
+++ b/docs/pages/x/api/charts/bar-series-type.json
@@ -1,6 +1,9 @@
 {
   "name": "BarSeriesType",
-  "imports": ["import { BarSeriesType } from '@mui/x-charts'"],
+  "imports": [
+    "import { BarSeriesType } from '@mui/x-charts-pro'",
+    "import { BarSeriesType } from '@mui/x-charts'"
+  ],
   "properties": {
     "type": { "type": { "description": "'bar'" }, "required": true },
     "color": { "type": { "description": "string" } },
diff --git a/docs/pages/x/api/charts/heatmap-tooltip.js b/docs/pages/x/api/charts/heatmap-tooltip.js
new file mode 100644
index 000000000000..30853287ca8b
--- /dev/null
+++ b/docs/pages/x/api/charts/heatmap-tooltip.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './heatmap-tooltip.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docsx/translations/api-docs/charts/heatmap-tooltip',
+    false,
+    /\.\/heatmap-tooltip.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};
diff --git a/docs/pages/x/api/charts/heatmap-tooltip.json b/docs/pages/x/api/charts/heatmap-tooltip.json
new file mode 100644
index 000000000000..be37a3064b5b
--- /dev/null
+++ b/docs/pages/x/api/charts/heatmap-tooltip.json
@@ -0,0 +1,135 @@
+{
+  "props": {
+    "anchorEl": {
+      "type": {
+        "name": "union",
+        "description": "(props, propName) => {\n  if (props[propName] == null) {\n    return new Error(`Prop '${propName}' is required but wasn't specified`);\n  }\n  if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n    return new Error(`Expected prop '${propName}' to be of type Element`);\n  }\n  return null;\n}<br>&#124;&nbsp;func<br>&#124;&nbsp;{ contextElement?: (props, propName) => {\n  if (props[propName] == null) {\n    return null;\n  }\n  if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n    return new Error(`Expected prop '${propName}' to be of type Element`);\n  }\n  return null;\n}, getBoundingClientRect: func }"
+      }
+    },
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
+    "component": { "type": { "name": "elementType" } },
+    "components": {
+      "type": { "name": "shape", "description": "{ Root?: elementType }" },
+      "default": "{}"
+    },
+    "componentsProps": {
+      "type": { "name": "shape", "description": "{ root?: func<br>&#124;&nbsp;object }" },
+      "default": "{}"
+    },
+    "container": {
+      "type": {
+        "name": "union",
+        "description": "(props, propName) => {\n  if (props[propName] == null) {\n    return new Error(`Prop '${propName}' is required but wasn't specified`);\n  }\n  if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n    return new Error(`Expected prop '${propName}' to be of type Element`);\n  }\n  return null;\n}<br>&#124;&nbsp;func"
+      }
+    },
+    "disablePortal": { "type": { "name": "bool" }, "default": "false" },
+    "keepMounted": { "type": { "name": "bool" }, "default": "false" },
+    "modifiers": {
+      "type": {
+        "name": "arrayOf",
+        "description": "Array&lt;{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain'<br>&#124;&nbsp;'afterRead'<br>&#124;&nbsp;'afterWrite'<br>&#124;&nbsp;'beforeMain'<br>&#124;&nbsp;'beforeRead'<br>&#124;&nbsp;'beforeWrite'<br>&#124;&nbsp;'main'<br>&#124;&nbsp;'read'<br>&#124;&nbsp;'write', requires?: Array&lt;string&gt;, requiresIfExists?: Array&lt;string&gt; }&gt;"
+      }
+    },
+    "open": { "type": { "name": "bool" } },
+    "placement": {
+      "type": {
+        "name": "enum",
+        "description": "'auto-end'<br>&#124;&nbsp;'auto-start'<br>&#124;&nbsp;'auto'<br>&#124;&nbsp;'bottom-end'<br>&#124;&nbsp;'bottom-start'<br>&#124;&nbsp;'bottom'<br>&#124;&nbsp;'left-end'<br>&#124;&nbsp;'left-start'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right-end'<br>&#124;&nbsp;'right-start'<br>&#124;&nbsp;'right'<br>&#124;&nbsp;'top-end'<br>&#124;&nbsp;'top-start'<br>&#124;&nbsp;'top'"
+      },
+      "default": "'bottom'"
+    },
+    "popperOptions": {
+      "type": {
+        "name": "shape",
+        "description": "{ modifiers?: array, onFirstUpdate?: func, placement?: 'auto-end'<br>&#124;&nbsp;'auto-start'<br>&#124;&nbsp;'auto'<br>&#124;&nbsp;'bottom-end'<br>&#124;&nbsp;'bottom-start'<br>&#124;&nbsp;'bottom'<br>&#124;&nbsp;'left-end'<br>&#124;&nbsp;'left-start'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right-end'<br>&#124;&nbsp;'right-start'<br>&#124;&nbsp;'right'<br>&#124;&nbsp;'top-end'<br>&#124;&nbsp;'top-start'<br>&#124;&nbsp;'top', strategy?: 'absolute'<br>&#124;&nbsp;'fixed' }"
+      },
+      "default": "{}"
+    },
+    "popperRef": {
+      "type": {
+        "name": "union",
+        "description": "func<br>&#124;&nbsp;{ current?: { destroy: func, forceUpdate: func, setOptions: func, state: { attributes: object, elements: object, modifiersData: object, options: object, orderedModifiers: Array&lt;object&gt;, placement: 'auto-end'<br>&#124;&nbsp;'auto-start'<br>&#124;&nbsp;'auto'<br>&#124;&nbsp;'bottom-end'<br>&#124;&nbsp;'bottom-start'<br>&#124;&nbsp;'bottom'<br>&#124;&nbsp;'left-end'<br>&#124;&nbsp;'left-start'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right-end'<br>&#124;&nbsp;'right-start'<br>&#124;&nbsp;'right'<br>&#124;&nbsp;'top-end'<br>&#124;&nbsp;'top-start'<br>&#124;&nbsp;'top', rects: object, reset: bool, scrollParents: object, strategy: 'absolute'<br>&#124;&nbsp;'fixed', styles: object }, update: func } }"
+      }
+    },
+    "slotProps": { "type": { "name": "object" }, "default": "{}" },
+    "slots": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "additionalInfo": { "slotsApi": true }
+    },
+    "sx": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+      },
+      "additionalInfo": { "sx": true }
+    },
+    "transition": { "type": { "name": "bool" }, "default": "false" }
+  },
+  "name": "HeatmapTooltip",
+  "imports": [
+    "import { HeatmapTooltip } from '@mui/x-charts-pro/Heatmap';",
+    "import { HeatmapTooltip } from '@mui/x-charts-pro';"
+  ],
+  "classes": [
+    {
+      "key": "cell",
+      "className": "MuiHeatmapTooltip-cell",
+      "description": "Styles applied to the cell element.",
+      "isGlobal": false
+    },
+    {
+      "key": "labelCell",
+      "className": "MuiHeatmapTooltip-labelCell",
+      "description": "Styles applied to the labelCell element.",
+      "isGlobal": false
+    },
+    {
+      "key": "mark",
+      "className": "MuiHeatmapTooltip-mark",
+      "description": "Styles applied to the mark element.",
+      "isGlobal": false
+    },
+    {
+      "key": "markCell",
+      "className": "MuiHeatmapTooltip-markCell",
+      "description": "Styles applied to the markCell element.",
+      "isGlobal": false
+    },
+    {
+      "key": "paper",
+      "className": "MuiHeatmapTooltip-paper",
+      "description": "Styles applied to the paper element.",
+      "isGlobal": false
+    },
+    {
+      "key": "root",
+      "className": "MuiHeatmapTooltip-root",
+      "description": "Styles applied to the root element.",
+      "isGlobal": false
+    },
+    {
+      "key": "row",
+      "className": "MuiHeatmapTooltip-row",
+      "description": "Styles applied to the row element.",
+      "isGlobal": false
+    },
+    {
+      "key": "table",
+      "className": "MuiHeatmapTooltip-table",
+      "description": "Styles applied to the table element.",
+      "isGlobal": false
+    },
+    {
+      "key": "valueCell",
+      "className": "MuiHeatmapTooltip-valueCell",
+      "description": "Styles applied to the valueCell element.",
+      "isGlobal": false
+    }
+  ],
+  "muiName": "MuiHeatmapTooltip",
+  "filename": "/packages/x-charts-pro/src/Heatmap/HeatmapTooltip.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/x/react-charts/heatmap/\">Charts - Heatmap <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a></a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/pages/x/api/charts/line-series-type.json b/docs/pages/x/api/charts/line-series-type.json
index 7833c7370804..85a484a51540 100644
--- a/docs/pages/x/api/charts/line-series-type.json
+++ b/docs/pages/x/api/charts/line-series-type.json
@@ -1,6 +1,9 @@
 {
   "name": "LineSeriesType",
-  "imports": ["import { LineSeriesType } from '@mui/x-charts'"],
+  "imports": [
+    "import { LineSeriesType } from '@mui/x-charts-pro'",
+    "import { LineSeriesType } from '@mui/x-charts'"
+  ],
   "properties": {
     "type": { "type": { "description": "'line'" }, "required": true },
     "area": { "type": { "description": "boolean" } },
diff --git a/docs/pages/x/api/charts/pie-series-type.json b/docs/pages/x/api/charts/pie-series-type.json
index 12ff413eeeab..b64499143723 100644
--- a/docs/pages/x/api/charts/pie-series-type.json
+++ b/docs/pages/x/api/charts/pie-series-type.json
@@ -1,6 +1,9 @@
 {
   "name": "PieSeriesType",
-  "imports": ["import { PieSeriesType } from '@mui/x-charts'"],
+  "imports": [
+    "import { PieSeriesType } from '@mui/x-charts-pro'",
+    "import { PieSeriesType } from '@mui/x-charts'"
+  ],
   "properties": {
     "data": { "type": { "description": "TData[]" }, "required": true },
     "type": { "type": { "description": "'pie'" }, "required": true },
diff --git a/docs/pages/x/api/charts/scatter-series-type.json b/docs/pages/x/api/charts/scatter-series-type.json
index 5f422acb6896..436b9311ec3f 100644
--- a/docs/pages/x/api/charts/scatter-series-type.json
+++ b/docs/pages/x/api/charts/scatter-series-type.json
@@ -1,6 +1,9 @@
 {
   "name": "ScatterSeriesType",
-  "imports": ["import { ScatterSeriesType } from '@mui/x-charts'"],
+  "imports": [
+    "import { ScatterSeriesType } from '@mui/x-charts-pro'",
+    "import { ScatterSeriesType } from '@mui/x-charts'"
+  ],
   "properties": {
     "type": { "type": { "description": "'scatter'" }, "required": true },
     "color": { "type": { "description": "string" } },
diff --git a/docs/pages/x/api/tree-view/tree-item-provider.js b/docs/pages/x/api/tree-view/tree-item-provider.js
new file mode 100644
index 000000000000..26c68824a62c
--- /dev/null
+++ b/docs/pages/x/api/tree-view/tree-item-provider.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './tree-item-provider.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docsx/translations/api-docs/tree-view/tree-item-provider',
+    false,
+    /\.\/tree-item-provider.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};
diff --git a/docs/pages/x/api/tree-view/tree-item-provider.json b/docs/pages/x/api/tree-view/tree-item-provider.json
new file mode 100644
index 000000000000..0e35cb71f68c
--- /dev/null
+++ b/docs/pages/x/api/tree-view/tree-item-provider.json
@@ -0,0 +1,15 @@
+{
+  "props": {},
+  "name": "TreeItemProvider",
+  "imports": [
+    "import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';",
+    "import { TreeItemProvider } from '@mui/x-tree-view';",
+    "import { TreeItemProvider } from '@mui/x-tree-view-pro';"
+  ],
+  "classes": [],
+  "muiName": "MuiTreeItemProvider",
+  "filename": "/packages/x-tree-view/src/TreeItemProvider/TreeItemProvider.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/x/react-tree-view/tree-item-customization/\">Tree Item Customization</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/pages/x/api/tree-view/tree-item.json b/docs/pages/x/api/tree-view/tree-item.json
index f1383007b5fe..e1578b38dda6 100644
--- a/docs/pages/x/api/tree-view/tree-item.json
+++ b/docs/pages/x/api/tree-view/tree-item.json
@@ -124,6 +124,6 @@
   "forwardsRefTo": "HTMLLIElement",
   "filename": "/packages/x-tree-view/src/TreeItem/TreeItem.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/x/react-tree-view/getting-started/\">Tree View - Getting Started</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/customization/\">Rich Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/editing/\">Rich Tree View - Label editing</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/expansion/\">Rich Tree View - Expansion</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/focus/\">Rich Tree View - Focus</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/items/\">Rich Tree View - Items</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/ordering/\">Rich Tree View - Ordering <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a></a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/selection/\">Rich Tree View - Selection</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/customization/\">Simple Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/expansion/\">Simple Tree View - Expansion</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/focus/\">Simple Tree View - Focus</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/items/\">Simple Tree View - Items</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/selection/\">Simple Tree View - Selection</a></li>\n<li><a href=\"/x/react-tree-view/tree-item-customization/\">Tree Item Customization</a></li></ul>",
+  "demos": "<ul><li><a href=\"/x/react-tree-view/rich-tree-view/customization/\">Rich Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/editing/\">Rich Tree View - Label editing</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/expansion/\">Rich Tree View - Expansion</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/focus/\">Rich Tree View - Focus</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/items/\">Rich Tree View - Items</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/ordering/\">Rich Tree View - Ordering <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a></a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/selection/\">Rich Tree View - Selection</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/customization/\">Simple Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/expansion/\">Simple Tree View - Expansion</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/focus/\">Simple Tree View - Focus</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/items/\">Simple Tree View - Items</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/selection/\">Simple Tree View - Selection</a></li>\n<li><a href=\"/x/react-tree-view/tree-item-customization/\">Tree Item Customization</a></li></ul>",
   "cssComponent": false
 }
diff --git a/docs/scripts/createXTypeScriptProjects.ts b/docs/scripts/createXTypeScriptProjects.ts
index 6acad90be81f..6623b3e41ff0 100644
--- a/docs/scripts/createXTypeScriptProjects.ts
+++ b/docs/scripts/createXTypeScriptProjects.ts
@@ -155,7 +155,7 @@ export const interfacesToDocument: InterfacesToDocumentType[] = [
   },
   {
     folder: 'charts',
-    packages: ['x-charts'],
+    packages: ['x-charts', 'x-charts-pro'],
     documentedInterfaces: [
       'BarSeriesType',
       'LineSeriesType',
diff --git a/docs/translations/api-docs/charts/axis-config.json b/docs/translations/api-docs/charts/axis-config.json
index 380002d211fd..79b8b72c88a8 100644
--- a/docs/translations/api-docs/charts/axis-config.json
+++ b/docs/translations/api-docs/charts/axis-config.json
@@ -39,6 +39,7 @@
     "tickPlacement": {
       "description": "The placement of ticks in regard to the band interval.<br />Only used if scale is &#39;band&#39;."
     },
-    "valueFormatter": { "description": "Formats the axis value." }
+    "valueFormatter": { "description": "Formats the axis value." },
+    "zoom": { "description": "" }
   }
 }
diff --git a/docs/translations/api-docs/charts/heatmap-tooltip/heatmap-tooltip.json b/docs/translations/api-docs/charts/heatmap-tooltip/heatmap-tooltip.json
new file mode 100644
index 000000000000..43442d3a2732
--- /dev/null
+++ b/docs/translations/api-docs/charts/heatmap-tooltip/heatmap-tooltip.json
@@ -0,0 +1,64 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "anchorEl": {
+      "description": "An HTML element, <a href=\"https://popper.js.org/docs/v2/virtual-elements/\">virtualElement</a>, or a function that returns either. It&#39;s used to set the position of the popper. The return value will passed as the reference object of the Popper instance."
+    },
+    "classes": { "description": "Override or extend the styles applied to the component." },
+    "component": {
+      "description": "The component used for the root node. Either a string to use a HTML element or a component."
+    },
+    "components": {
+      "description": "The components used for each slot inside the Popper. Either a string to use a HTML element or a component."
+    },
+    "componentsProps": { "description": "The props used for each slot inside the Popper." },
+    "container": {
+      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
+    },
+    "disablePortal": {
+      "description": "The <code>children</code> will be under the DOM hierarchy of the parent component."
+    },
+    "keepMounted": {
+      "description": "Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Popper."
+    },
+    "modifiers": {
+      "description": "Popper.js is based on a &quot;plugin-like&quot; architecture, most of its features are fully encapsulated &quot;modifiers&quot;.<br>A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks. To learn how to create a modifier, <a href=\"https://popper.js.org/docs/v2/modifiers/\">read the modifiers documentation</a>."
+    },
+    "open": { "description": "If <code>true</code>, the component is shown." },
+    "placement": { "description": "Popper placement." },
+    "popperOptions": {
+      "description": "Options provided to the <a href=\"https://popper.js.org/docs/v2/constructors/#options\"><code>Popper.js</code></a> instance."
+    },
+    "popperRef": { "description": "A ref that points to the used popper instance." },
+    "slotProps": { "description": "The props used for each slot inside the Popper." },
+    "slots": {
+      "description": "The components used for each slot inside the Popper. Either a string to use a HTML element or a component."
+    },
+    "sx": {
+      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
+    },
+    "transition": {
+      "description": "Help supporting a react-transition-group/Transition component."
+    }
+  },
+  "classDescriptions": {
+    "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
+    "labelCell": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the labelCell element"
+    },
+    "mark": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the mark element" },
+    "markCell": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the markCell element"
+    },
+    "paper": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the paper element" },
+    "root": { "description": "Styles applied to the root element." },
+    "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
+    "table": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the table element" },
+    "valueCell": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the valueCell element"
+    }
+  }
+}
diff --git a/docs/translations/api-docs/tree-view/tree-item-provider/tree-item-provider.json b/docs/translations/api-docs/tree-view/tree-item-provider/tree-item-provider.json
new file mode 100644
index 000000000000..f93d4cbd8c79
--- /dev/null
+++ b/docs/translations/api-docs/tree-view/tree-item-provider/tree-item-provider.json
@@ -0,0 +1 @@
+{ "componentDescription": "", "propDescriptions": {}, "classDescriptions": {} }
diff --git a/packages/x-charts-pro/src/Heatmap/HeatmapTooltip.tsx b/packages/x-charts-pro/src/Heatmap/HeatmapTooltip.tsx
index 2ecefa914ce3..2f8a4233cb4b 100644
--- a/packages/x-charts-pro/src/Heatmap/HeatmapTooltip.tsx
+++ b/packages/x-charts-pro/src/Heatmap/HeatmapTooltip.tsx
@@ -39,9 +39,6 @@ const useUtilityClasses = (ownerState: { classes: HeatmapTooltipProps['classes']
   return composeClasses(slots, getChartsTooltipUtilityClass, classes);
 };
 
-/**
- * @ignore - internal component.
- */
 function DefaultHeatmapTooltipContent(props: Pick<HeatmapTooltipProps, 'classes'>) {
   const { classes } = props;
 
diff --git a/packages/x-charts-pro/src/context/ChartDataProviderPro/ChartDataProviderPro.tsx b/packages/x-charts-pro/src/context/ChartDataProviderPro/ChartDataProviderPro.tsx
index 91ca02d3f8cd..e8d1dc8debdf 100644
--- a/packages/x-charts-pro/src/context/ChartDataProviderPro/ChartDataProviderPro.tsx
+++ b/packages/x-charts-pro/src/context/ChartDataProviderPro/ChartDataProviderPro.tsx
@@ -1,6 +1,5 @@
 'use client';
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import {
   ChartDataProviderProps,
   DrawingAreaProvider,
@@ -63,321 +62,4 @@ function ChartDataProviderPro(props: ChartDataProviderProProps) {
   );
 }
 
-ChartDataProviderPro.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /**
-   * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
-   */
-  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
-  /**
-   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
-   */
-  dataset: PropTypes.arrayOf(PropTypes.object),
-  desc: PropTypes.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: PropTypes.bool,
-  /**
-   * The height of the chart in px.
-   */
-  height: PropTypes.number.isRequired,
-  /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
-   */
-  highlightedItem: PropTypes.shape({
-    dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  }),
-  /**
-   * The margin between the SVG and the drawing area.
-   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
-   */
-  margin: PropTypes.shape({
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number,
-  }),
-  /**
-   * The callback fired when the highlighted item changes.
-   *
-   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
-   */
-  onHighlightChange: PropTypes.func,
-  /**
-   * Callback fired when the zoom has changed.
-   *
-   * @param {ZoomData[]} zoomData Updated zoom data.
-   */
-  onZoomChange: PropTypes.func,
-  /**
-   * An array of plugins defining how to preprocess data.
-   * If not provided, the container supports line, bar, scatter and pie charts.
-   */
-  plugins: PropTypes.arrayOf(PropTypes.object),
-  /**
-   * The array of series to display.
-   * Each type of series has its own specificity.
-   * Please refer to the appropriate docs page to learn more about it.
-   */
-  series: PropTypes.arrayOf(PropTypes.object).isRequired,
-  /**
-   * If `true`, animations are skipped.
-   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
-   */
-  skipAnimation: PropTypes.bool,
-  sx: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
-    PropTypes.func,
-    PropTypes.object,
-  ]),
-  title: PropTypes.string,
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number,
-  }),
-  /**
-   * The width of the chart in px.
-   */
-  width: PropTypes.number.isRequired,
-  /**
-   * The configuration of the x-axes.
-   * If not provided, a default axis config is used.
-   * An array of [[AxisConfig]] objects.
-   */
-  xAxis: PropTypes.arrayOf(
-    PropTypes.shape({
-      classes: PropTypes.object,
-      colorMap: PropTypes.oneOfType([
-        PropTypes.shape({
-          colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-          type: PropTypes.oneOf(['ordinal']).isRequired,
-          unknownColor: PropTypes.string,
-          values: PropTypes.arrayOf(
-            PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string])
-              .isRequired,
-          ),
-        }),
-        PropTypes.shape({
-          color: PropTypes.oneOfType([
-            PropTypes.arrayOf(PropTypes.string.isRequired),
-            PropTypes.func,
-          ]).isRequired,
-          max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-          min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-          type: PropTypes.oneOf(['continuous']).isRequired,
-        }),
-        PropTypes.shape({
-          colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-          thresholds: PropTypes.arrayOf(
-            PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired,
-          ).isRequired,
-          type: PropTypes.oneOf(['piecewise']).isRequired,
-        }),
-      ]),
-      data: PropTypes.array,
-      dataKey: PropTypes.string,
-      disableLine: PropTypes.bool,
-      disableTicks: PropTypes.bool,
-      domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-      fill: PropTypes.string,
-      hideTooltip: PropTypes.bool,
-      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-      label: PropTypes.string,
-      labelFontSize: PropTypes.number,
-      labelStyle: PropTypes.object,
-      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      position: PropTypes.oneOf(['bottom', 'top']),
-      reverse: PropTypes.bool,
-      scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
-      slotProps: PropTypes.object,
-      slots: PropTypes.object,
-      stroke: PropTypes.string,
-      sx: PropTypes.oneOfType([
-        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
-        PropTypes.func,
-        PropTypes.object,
-      ]),
-      tickFontSize: PropTypes.number,
-      tickInterval: PropTypes.oneOfType([
-        PropTypes.oneOf(['auto']),
-        PropTypes.array,
-        PropTypes.func,
-      ]),
-      tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-      tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-      tickLabelStyle: PropTypes.object,
-      tickMaxStep: PropTypes.number,
-      tickMinStep: PropTypes.number,
-      tickNumber: PropTypes.number,
-      tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-      tickSize: PropTypes.number,
-      valueFormatter: PropTypes.func,
-      zoom: PropTypes.oneOfType([
-        PropTypes.shape({
-          filterMode: PropTypes.oneOf(['discard', 'keep']),
-          maxEnd: PropTypes.number,
-          maxSpan: PropTypes.number,
-          minSpan: PropTypes.number,
-          minStart: PropTypes.number,
-          panning: PropTypes.bool,
-          step: PropTypes.number,
-        }),
-        PropTypes.bool,
-      ]),
-    }),
-  ),
-  /**
-   * The configuration of the y-axes.
-   * If not provided, a default axis config is used.
-   * An array of [[AxisConfig]] objects.
-   */
-  yAxis: PropTypes.arrayOf(
-    PropTypes.shape({
-      classes: PropTypes.object,
-      colorMap: PropTypes.oneOfType([
-        PropTypes.shape({
-          colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-          type: PropTypes.oneOf(['ordinal']).isRequired,
-          unknownColor: PropTypes.string,
-          values: PropTypes.arrayOf(
-            PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string])
-              .isRequired,
-          ),
-        }),
-        PropTypes.shape({
-          color: PropTypes.oneOfType([
-            PropTypes.arrayOf(PropTypes.string.isRequired),
-            PropTypes.func,
-          ]).isRequired,
-          max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-          min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-          type: PropTypes.oneOf(['continuous']).isRequired,
-        }),
-        PropTypes.shape({
-          colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-          thresholds: PropTypes.arrayOf(
-            PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired,
-          ).isRequired,
-          type: PropTypes.oneOf(['piecewise']).isRequired,
-        }),
-      ]),
-      data: PropTypes.array,
-      dataKey: PropTypes.string,
-      disableLine: PropTypes.bool,
-      disableTicks: PropTypes.bool,
-      domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-      fill: PropTypes.string,
-      hideTooltip: PropTypes.bool,
-      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-      label: PropTypes.string,
-      labelFontSize: PropTypes.number,
-      labelStyle: PropTypes.object,
-      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      position: PropTypes.oneOf(['left', 'right']),
-      reverse: PropTypes.bool,
-      scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
-      slotProps: PropTypes.object,
-      slots: PropTypes.object,
-      stroke: PropTypes.string,
-      sx: PropTypes.oneOfType([
-        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
-        PropTypes.func,
-        PropTypes.object,
-      ]),
-      tickFontSize: PropTypes.number,
-      tickInterval: PropTypes.oneOfType([
-        PropTypes.oneOf(['auto']),
-        PropTypes.array,
-        PropTypes.func,
-      ]),
-      tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-      tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-      tickLabelStyle: PropTypes.object,
-      tickMaxStep: PropTypes.number,
-      tickMinStep: PropTypes.number,
-      tickNumber: PropTypes.number,
-      tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-      tickSize: PropTypes.number,
-      valueFormatter: PropTypes.func,
-      zoom: PropTypes.oneOfType([
-        PropTypes.shape({
-          filterMode: PropTypes.oneOf(['discard', 'keep']),
-          maxEnd: PropTypes.number,
-          maxSpan: PropTypes.number,
-          minSpan: PropTypes.number,
-          minStart: PropTypes.number,
-          panning: PropTypes.bool,
-          step: PropTypes.number,
-        }),
-        PropTypes.bool,
-      ]),
-    }),
-  ),
-  /**
-   * The configuration of the z-axes.
-   */
-  zAxis: PropTypes.arrayOf(
-    PropTypes.shape({
-      colorMap: PropTypes.oneOfType([
-        PropTypes.shape({
-          colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-          type: PropTypes.oneOf(['ordinal']).isRequired,
-          unknownColor: PropTypes.string,
-          values: PropTypes.arrayOf(
-            PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string])
-              .isRequired,
-          ),
-        }),
-        PropTypes.shape({
-          color: PropTypes.oneOfType([
-            PropTypes.arrayOf(PropTypes.string.isRequired),
-            PropTypes.func,
-          ]).isRequired,
-          max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-          min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-          type: PropTypes.oneOf(['continuous']).isRequired,
-        }),
-        PropTypes.shape({
-          colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-          thresholds: PropTypes.arrayOf(
-            PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired,
-          ).isRequired,
-          type: PropTypes.oneOf(['piecewise']).isRequired,
-        }),
-      ]),
-      data: PropTypes.array,
-      dataKey: PropTypes.string,
-      id: PropTypes.string,
-      max: PropTypes.number,
-      min: PropTypes.number,
-    }),
-  ),
-  /**
-   * The list of zoom data related to each axis.
-   */
-  zoom: PropTypes.arrayOf(
-    PropTypes.shape({
-      axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-      end: PropTypes.number.isRequired,
-      start: PropTypes.number.isRequired,
-    }),
-  ),
-} as any;
-
 export { ChartDataProviderPro };
diff --git a/packages/x-tree-view/src/TreeItemProvider/TreeItemProvider.tsx b/packages/x-tree-view/src/TreeItemProvider/TreeItemProvider.tsx
index 30036f8078b4..162d0149d915 100644
--- a/packages/x-tree-view/src/TreeItemProvider/TreeItemProvider.tsx
+++ b/packages/x-tree-view/src/TreeItemProvider/TreeItemProvider.tsx
@@ -1,3 +1,5 @@
+"use client"
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TreeItemProviderProps } from './TreeItemProvider.types';
 import { useTreeViewContext } from '../internals/TreeViewProvider';
@@ -5,16 +7,13 @@ import { generateTreeItemIdAttribute } from '../internals/corePlugins/useTreeVie
 import { useSelector } from '../internals/hooks/useSelector';
 import { selectorTreeViewId } from '../internals/corePlugins/useTreeViewId/useTreeViewId.selectors';
 
-/**
- * @ignore - internal component.
- */
 function TreeItemProvider(props: TreeItemProviderProps) {
   const { children, itemId, id } = props;
   const { wrapItem, instance, store } = useTreeViewContext<[]>();
   const treeId = useSelector(store, selectorTreeViewId);
   const idAttribute = generateTreeItemIdAttribute({ itemId, treeId, id });
 
-  return wrapItem({ children, itemId, instance, idAttribute });
+  return <React.Fragment>{wrapItem({ children, itemId, instance, idAttribute })}</React.Fragment>;
 }
 
 TreeItemProvider.propTypes = {