From 7259023920f7e626b502c13debcea43146b91f5a Mon Sep 17 00:00:00 2001
From: Jose Rodolfo Freitas <joserodolfo.freitas@gmail.com>
Date: Tue, 27 Aug 2024 12:17:06 +0200
Subject: [PATCH 01/10] Update Premium price and remove any mention to cap

---
 docs/src/components/pricing/PricingFAQ.tsx    | 11 ---
 docs/src/components/pricing/PricingTable.tsx  | 70 ++-----------------
 .../pricing/PricingWhatToExpect.tsx           |  8 +--
 3 files changed, 6 insertions(+), 83 deletions(-)

diff --git a/docs/src/components/pricing/PricingFAQ.tsx b/docs/src/components/pricing/PricingFAQ.tsx
index ccff1240d3f2c2..0a84733be3679c 100644
--- a/docs/src/components/pricing/PricingFAQ.tsx
+++ b/docs/src/components/pricing/PricingFAQ.tsx
@@ -82,17 +82,6 @@ const faqData = [
       </React.Fragment>
     ),
   },
-  {
-    summary: 'Why are you calling it "early access"?',
-    detail: (
-      <React.Fragment>
-        We think you'll love the features we've built so far, but we're planning to release more. We
-        opened it up as soon as we had something useful so that you can start getting value from it
-        right away, and we'll be adding new features and components based on our own ideas, and on
-        suggestions from early access customers.
-      </React.Fragment>
-    ),
-  },
   {
     summary: 'Do developers have to be named?',
     detail: (
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 4f4a68a3ce34d8..ffe9e4bd48c46c 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -10,7 +10,6 @@ import Tooltip from '@mui/material/Tooltip';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { useRouter } from 'next/router';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
-import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
 import LaunchRounded from '@mui/icons-material/LaunchRounded';
 import UnfoldMoreRounded from '@mui/icons-material/UnfoldMoreRounded';
 import { Link } from '@mui/docs/Link';
@@ -94,7 +93,7 @@ export function PlanPrice(props: PlanPriceProps) {
 
   const { licenseModel } = useLicenseModel();
   const annual = licenseModel === 'annual';
-  const planPriceMinHeight = 64;
+  const planPriceMinHeight = 24;
 
   if (plan === 'community') {
     return (
@@ -103,7 +102,7 @@ export function PlanPrice(props: PlanPriceProps) {
           <Typography
             variant="h3"
             component="div"
-            sx={{ fontWeight: 'bold', color: 'success.600', mt: 4.5 }}
+            sx={{ fontWeight: 'bold', color: 'success.600', mt: 6 }}
           >
             $0
           </Typography>
@@ -165,19 +164,6 @@ export function PlanPrice(props: PlanPriceProps) {
               {priceExplanation}
             </Typography>
           )}
-
-          <Typography variant="body2" sx={{ color: 'text.secondary', textAlign: 'center' }}>
-            No extra fees for orders with over 10 devs&nbsp;
-            <span>
-              <Tooltip title="Our pricing policies are changing. Read more on our blog.">
-                <Link href="/blog/mui-x-sep-2024-price-update/">
-                  by Aug 30
-                  <OpenInNewRoundedIcon sx={{ fontSize: '16px', ml: 0.5 }} />
-                </Link>
-              </Tooltip>
-            </span>
-            .
-          </Typography>
         </Box>
       </React.Fragment>
     );
@@ -185,10 +171,7 @@ export function PlanPrice(props: PlanPriceProps) {
   // else Premium
 
   const originalPriceMultiplicator = monthlyDisplay ? 1 : 12;
-  const premiumOriginalValue = annual
-    ? 49 * originalPriceMultiplicator
-    : 49 * 3 * originalPriceMultiplicator;
-  const premiumMonthlyValue = annual ? 37 : 37 * 3;
+  const premiumMonthlyValue = annual ? 49 : 49 * 3;
   const premiumAnnualValue = premiumMonthlyValue * 12;
 
   const premiumDisplayedValue = monthlyDisplay ? premiumMonthlyValue : premiumAnnualValue;
@@ -200,34 +183,6 @@ export function PlanPrice(props: PlanPriceProps) {
     <React.Fragment>
       <LicenseModelSwitch />
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', mt: 1, mb: 4 }}>
-        <Typography
-          variant="caption"
-          sx={[
-            {
-              fontWeight: 'medium',
-            },
-            (theme) => ({
-              borderRadius: 0.5,
-              alignSelf: 'flex-end',
-              textDecoration: 'line-through',
-              py: 0.5,
-              px: 1,
-              mb: 0.5,
-              fontWeight: 'medium',
-              bgcolor: 'error.50',
-              color: 'error.500',
-              border: '1px solid',
-              borderColor: 'error.100',
-              ...theme.applyDarkStyles({
-                color: 'error.300',
-                bgcolor: 'error.900',
-                borderColor: 'error.800',
-              }),
-            }),
-          ]}
-        >
-          {formatCurrency(premiumOriginalValue)}
-        </Typography>
         <Box sx={{ width: 10 }} />
         <Typography variant="h3" component="div" sx={{ fontWeight: 'bold', color: 'primary.main' }}>
           {formatCurrency(premiumDisplayedValue)}
@@ -252,18 +207,6 @@ export function PlanPrice(props: PlanPriceProps) {
             {priceExplanation}
           </Typography>
         )}
-        <Typography variant="body2" sx={{ color: 'text.secondary', textAlign: 'center' }}>
-          🐦 Early Bird: <strong>25% off</strong> if ordered &nbsp;
-          <span>
-            <Tooltip title="Our pricing policies are changing. Read more on our blog.">
-              <Link href="/blog/mui-x-sep-2024-price-update/">
-                by Aug 30
-                <OpenInNewRoundedIcon sx={{ fontSize: '16px', ml: 0.5 }} />{' '}
-              </Link>
-            </Tooltip>
-          </span>
-          .
-        </Typography>
       </Box>
     </React.Fragment>
   );
@@ -939,12 +882,7 @@ const proData: Record<string, React.ReactNode> = {
   'response-time': no,
   'pre-screening': no,
   'issue-escalation': no,
-  'security-questionnaire': (
-    <Info
-      value="Available from 10+ devs"
-      metadata={'Not available under the "Capped at 10 licenses" policy'}
-    />
-  ),
+  'security-questionnaire': <Info value="Available from 10+ devs" />,
 };
 
 const premiumData: Record<string, React.ReactNode> = {
diff --git a/docs/src/components/pricing/PricingWhatToExpect.tsx b/docs/src/components/pricing/PricingWhatToExpect.tsx
index fbb5668b3544c4..843e6c53eee259 100644
--- a/docs/src/components/pricing/PricingWhatToExpect.tsx
+++ b/docs/src/components/pricing/PricingWhatToExpect.tsx
@@ -180,12 +180,8 @@ export default function PricingWhatToExpect() {
             </Typography>
           </Box>
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            The Pro plan is capped at 10 developers licensed; you do not need to pay for additional
-            licenses for more than 10 developers.
-            <br />
-            <br />
-            You can contact <Link href="mailto:sales@mui.com">sales</Link> for a volume discount
-            when licensing over 25 developers under the Premium plan.
+            Have a team of 25 or more developers? Get in touch with our{' '}
+            <Link href="mailto:sales@mui.com">sales team</Link> for a volume discount.
           </Typography>
         </Paper>
       </Box>

From 3f21ba057ba6dd01d4af2968901ebca07c5867d2 Mon Sep 17 00:00:00 2001
From: Jose Rodolfo Freitas <joserodolfo.freitas@gmail.com>
Date: Tue, 27 Aug 2024 14:58:48 +0200
Subject: [PATCH 02/10] Remove unused variable

---
 docs/src/components/pricing/PricingTable.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index ffe9e4bd48c46c..4e6ef20ce5698c 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -169,8 +169,6 @@ export function PlanPrice(props: PlanPriceProps) {
     );
   }
   // else Premium
-
-  const originalPriceMultiplicator = monthlyDisplay ? 1 : 12;
   const premiumMonthlyValue = annual ? 49 : 49 * 3;
   const premiumAnnualValue = premiumMonthlyValue * 12;
 

From 514f0081d329d86340f2f0abbd4e1e101d798eba Mon Sep 17 00:00:00 2001
From: Jose Rodolfo Freitas <joserodolfo.freitas@gmail.com>
Date: Mon, 2 Sep 2024 10:08:06 +0200
Subject: [PATCH 03/10] update pricing table with charts newest updates

---
 docs/src/components/pricing/PricingTable.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 4e6ef20ce5698c..dc3601b95ec6a8 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -576,8 +576,8 @@ const rowHeaders: Record<string, React.ReactNode> = {
   'charts/pie': <ColumnHead label="Pie chart" href="/x/react-charts/pie/" />,
   'charts/sparkline': <ColumnHead label="Sparkline" href="/x/react-charts/sparkline/" />,
   'charts/gauge': <ColumnHead label="Gauge" href="/x/react-charts/gauge/" />,
-  'charts/treemap': <ColumnHead label="Treemap" href="/x/react-charts/treemap/" />,
   'charts/heatmap': <ColumnHead label="Heatmap" href="/x/react-charts/heatmap/" />,
+  'charts/treemap': <ColumnHead label="Treemap" href="/x/react-charts/treemap/" />,
   'charts/radar': <ColumnHead label="Radar" href="/x/react-charts/radar/" />,
   'charts/funnel': <ColumnHead label="Funnel" href="/x/react-charts/funnel/" />,
   'charts/sankey': <ColumnHead label="Sankey" href="/x/react-charts/sankey/" />,
@@ -750,8 +750,8 @@ const communityData: Record<string, React.ReactNode> = {
   'charts/pie': yes,
   'charts/sparkline': yes,
   'charts/gauge': yes,
-  'charts/treemap': pending,
   'charts/heatmap': no,
+  'charts/treemap': pending,
   'charts/radar': pending,
   'charts/funnel': no,
   'charts/sankey': no,
@@ -847,8 +847,9 @@ const proData: Record<string, React.ReactNode> = {
   'charts/pie': yes,
   'charts/sparkline': yes,
   'charts/gauge': yes,
+  'charts/heatmap': yes,
   'charts/treemap': pending,
-  'charts/heatmap': pending,
+  
   'charts/radar': pending,
   'charts/funnel': pending,
   'charts/sankey': pending,
@@ -859,7 +860,7 @@ const proData: Record<string, React.ReactNode> = {
   // charts - features
   'charts/legend': yes,
   'charts/tooltip': yes,
-  'charts/mouse-zoom': pending,
+  'charts/mouse-zoom': yes,
   'charts/export': pending,
   // charts - datagrid
   'charts/cell-with-charts': yes,
@@ -944,8 +945,8 @@ const premiumData: Record<string, React.ReactNode> = {
   'charts/pie': yes,
   'charts/sparkline': yes,
   'charts/gauge': yes,
+  'charts/heatmap': yes,
   'charts/treemap': pending,
-  'charts/heatmap': pending,
   'charts/radar': pending,
   'charts/funnel': pending,
   'charts/sankey': pending,
@@ -956,7 +957,7 @@ const premiumData: Record<string, React.ReactNode> = {
   // charts - features
   'charts/legend': yes,
   'charts/tooltip': yes,
-  'charts/mouse-zoom': pending,
+  'charts/mouse-zoom': yes,
   'charts/export': pending,
   // charts - datagrid
   'charts/cell-with-charts': yes,
@@ -1520,12 +1521,12 @@ export default function PricingTable({
         {divider}
         {renderNestedRow('charts/gauge')}
         {divider}
+        {renderNestedRow('charts/heatmap')}
+        {divider}
         {renderNestedRow('charts/treemap')}
         {divider}
         {renderNestedRow('charts/radar')}
         {divider}
-        {renderNestedRow('charts/heatmap')}
-        {divider}
         {renderNestedRow('charts/funnel')}
         {divider}
         {renderNestedRow('charts/sankey')}

From 1246a49d123e17da03da5aea75002f7ef2c927a4 Mon Sep 17 00:00:00 2001
From: Jose Rodolfo Freitas <joserodolfo.freitas@gmail.com>
Date: Mon, 2 Sep 2024 10:08:19 +0200
Subject: [PATCH 04/10] prettier

---
 docs/src/components/pricing/PricingTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index dc3601b95ec6a8..0fa6544f780ca5 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -849,7 +849,7 @@ const proData: Record<string, React.ReactNode> = {
   'charts/gauge': yes,
   'charts/heatmap': yes,
   'charts/treemap': pending,
-  
+
   'charts/radar': pending,
   'charts/funnel': pending,
   'charts/sankey': pending,

From 348bf71d3a180af6fe60f7649c88e6ee5ac1ae3e Mon Sep 17 00:00:00 2001
From: Jose Rodolfo Freitas <joserodolfo.freitas@gmail.com>
Date: Mon, 2 Sep 2024 10:51:00 +0200
Subject: [PATCH 05/10] Add details to TreeView pricing

---
 docs/src/components/pricing/PricingTable.tsx | 105 ++++++++++++++++++-
 1 file changed, 100 insertions(+), 5 deletions(-)

diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 0fa6544f780ca5..33b845e94daa25 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -596,7 +596,15 @@ const rowHeaders: Record<string, React.ReactNode> = {
   ),
   'charts/filter-interaction': <ColumnHead label="Row filtering" />,
   'charts/selection-interaction': <ColumnHead label="Range selection" />,
-  'tree-view/tree-view': <ColumnHead label="Tree View" href="/x/react-tree-view/" />,
+  // Treeview - components
+  'tree-view/simple-tree-view': <ColumnHead label="Simple Tree View" href="/x/react-tree-view/simple-tree-view/items/" />,
+  'tree-view/rich-tree-view': <ColumnHead label="Rich Tree View" href="/x/react-tree-view/rich-tree-view/items/" />,
+
+  // Treeview - advanced features
+  'tree-view/inline-editing': <ColumnHead label="Inline editing" href="/x/react-tree-view/rich-tree-view/editing/" />,
+  'tree-view/drag-to-reorder': <ColumnHead label="Drag to reorder" href="/x/react-tree-view/rich-tree-view/ordering/" />,
+  'tree-view/virtualization': <ColumnHead label="Virtualization" />,
+  
   'mui-x-production': <ColumnHead label="Perpetual use in production" />,
   'mui-x-development': <ColumnHead label="Development license" tooltip="For active development" />,
   'mui-x-development-perpetual': (
@@ -769,7 +777,11 @@ const communityData: Record<string, React.ReactNode> = {
   'charts/filter-interaction': no,
   'charts/selection-interaction': no,
   // Tree View
-  'tree-view/tree-view': yes,
+  'tree-view/simple-tree-view': yes,
+  'tree-view/rich-tree-view': yes,
+  'tree-view/inline-editing': yes,
+  'tree-view/drag-to-reorder': no,
+  'tree-view/virtualization': no,
   // general
   'mui-x-production': yes,
   'mui-x-updates': yes,
@@ -867,7 +879,11 @@ const proData: Record<string, React.ReactNode> = {
   'charts/filter-interaction': pending,
   'charts/selection-interaction': no,
   // Tree View
-  'tree-view/tree-view': yes,
+  'tree-view/simple-tree-view': yes,
+  'tree-view/rich-tree-view': yes,
+  'tree-view/inline-editing': yes,
+  'tree-view/drag-to-reorder': yes,
+  'tree-view/virtualization': pending,
   // general
   'mui-x-production': yes,
   'mui-x-development': <Info value="1 year" />,
@@ -964,7 +980,11 @@ const premiumData: Record<string, React.ReactNode> = {
   'charts/filter-interaction': pending,
   'charts/selection-interaction': pending,
   // Tree View
-  'tree-view/tree-view': yes,
+  'tree-view/simple-tree-view': yes,
+  'tree-view/rich-tree-view': yes,
+  'tree-view/inline-editing': yes,
+  'tree-view/drag-to-reorder': yes,
+  'tree-view/virtualization': pending,
   // general
   'mui-x-production': yes,
   'mui-x-development': <Info value="1 year" />,
@@ -1210,11 +1230,13 @@ export default function PricingTable({
   const router = useRouter();
   const [dataGridCollapsed, setDataGridCollapsed] = React.useState(false);
   const [chartsCollapsed, setChartsCollapsed] = React.useState(false);
+  const [treeViewCollapsed, setTreeViewCollapsed] = React.useState(false);
 
   React.useEffect(() => {
     if (router.query['expand-path'] === 'all') {
       setDataGridCollapsed(true);
       setChartsCollapsed(true);
+      setTreeViewCollapsed(true);
     }
   }, [router.query]);
 
@@ -1248,6 +1270,12 @@ export default function PricingTable({
       sx={{ color: 'grey.600', opacity: chartsCollapsed ? 0 : 1 }}
     />
   );
+  const treeViewUnfoldMore = (
+    <UnfoldMoreRounded
+      fontSize="small"
+      sx={{ color: 'grey.600', opacity: treeViewCollapsed ? 0 : 1 }}
+    />
+  );
 
   const renderRow = (key: string) => renderMasterRow(key, gridSx, plans);
   const renderNestedRow = (key: string) => renderMasterRow(key, nestedGridSx, plans);
@@ -1556,7 +1584,74 @@ export default function PricingTable({
         {renderNestedRow('charts/selection-interaction')}
       </StyledCollapse>
       {divider}
-      {renderRow('tree-view/tree-view')}
+      <Box
+        sx={{
+          position: 'relative',
+          minHeight: 58,
+          '& svg': { transition: '0.3s' },
+          '&:hover svg': { color: 'primary.main' },
+          ...gridSx,
+        }}
+      >
+        <Cell />
+        <Cell sx={{ minHeight: 60 }}>{treeViewUnfoldMore}</Cell>
+        <Cell highlighted sx={{ display: { xs: 'none', md: 'flex' }, minHeight: 60 }}>
+          {treeViewUnfoldMore}
+        </Cell>
+        <Cell sx={{ display: { xs: 'none', md: 'flex' }, minHeight: 60 }}>{treeViewUnfoldMore}</Cell>
+        <Button
+          fullWidth
+          onClick={() => setTreeViewCollapsed((bool) => !bool)}
+          endIcon={
+            <KeyboardArrowRightRounded
+              color="primary"
+              sx={{ transform: treeViewCollapsed ? 'rotate(-90deg)' : 'rotate(90deg)' }}
+            />
+          }
+          sx={[
+            (theme) => ({
+              px: 1,
+              justifyContent: 'flex-start',
+              fontSize: '0.875rem',
+              fontWeight: 'medium',
+              borderRadius: '0px',
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              width: '100%',
+              height: '100%',
+              '&:hover': {
+                bgcolor: alpha(theme.palette.primary.main, 0.06),
+                '@media (hover: none)': {
+                  bgcolor: 'initial',
+                },
+              },
+            }),
+            (theme) =>
+              theme.applyDarkStyles({
+                '&:hover': {
+                  bgcolor: alpha(theme.palette.primary.main, 0.06),
+                },
+              }),
+          ]}
+        >
+          TreeView
+        </Button>
+      </Box>
+      <StyledCollapse in={treeViewCollapsed} timeout={700}>
+        <RowCategory>Components</RowCategory>
+        {renderNestedRow('tree-view/simple-tree-view')}
+        {divider}
+        {renderNestedRow('tree-view/rich-tree-view')}
+        {divider}
+        <RowCategory>Advanced features</RowCategory>
+        {renderNestedRow('tree-view/inline-editing')}
+        {divider}
+        {renderNestedRow('tree-view/drag-to-reorder')}
+        {divider}
+        {renderNestedRow('tree-view/virtualization')}
+        {divider}
+      </StyledCollapse>
       {divider}
       {renderRow('mui-x-production')}
       {divider}

From 5a7de3a7726f42d43427d6be0c8e81e22df5be77 Mon Sep 17 00:00:00 2001
From: Jose Rodolfo Freitas <joserodolfo.freitas@gmail.com>
Date: Mon, 2 Sep 2024 10:54:39 +0200
Subject: [PATCH 06/10] prettier

---
 docs/src/components/pricing/PricingTable.tsx | 22 ++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 33b845e94daa25..2eae0b8bb478f9 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -597,14 +597,22 @@ const rowHeaders: Record<string, React.ReactNode> = {
   'charts/filter-interaction': <ColumnHead label="Row filtering" />,
   'charts/selection-interaction': <ColumnHead label="Range selection" />,
   // Treeview - components
-  'tree-view/simple-tree-view': <ColumnHead label="Simple Tree View" href="/x/react-tree-view/simple-tree-view/items/" />,
-  'tree-view/rich-tree-view': <ColumnHead label="Rich Tree View" href="/x/react-tree-view/rich-tree-view/items/" />,
+  'tree-view/simple-tree-view': (
+    <ColumnHead label="Simple Tree View" href="/x/react-tree-view/simple-tree-view/items/" />
+  ),
+  'tree-view/rich-tree-view': (
+    <ColumnHead label="Rich Tree View" href="/x/react-tree-view/rich-tree-view/items/" />
+  ),
 
   // Treeview - advanced features
-  'tree-view/inline-editing': <ColumnHead label="Inline editing" href="/x/react-tree-view/rich-tree-view/editing/" />,
-  'tree-view/drag-to-reorder': <ColumnHead label="Drag to reorder" href="/x/react-tree-view/rich-tree-view/ordering/" />,
+  'tree-view/inline-editing': (
+    <ColumnHead label="Inline editing" href="/x/react-tree-view/rich-tree-view/editing/" />
+  ),
+  'tree-view/drag-to-reorder': (
+    <ColumnHead label="Drag to reorder" href="/x/react-tree-view/rich-tree-view/ordering/" />
+  ),
   'tree-view/virtualization': <ColumnHead label="Virtualization" />,
-  
+
   'mui-x-production': <ColumnHead label="Perpetual use in production" />,
   'mui-x-development': <ColumnHead label="Development license" tooltip="For active development" />,
   'mui-x-development-perpetual': (
@@ -1598,7 +1606,9 @@ export default function PricingTable({
         <Cell highlighted sx={{ display: { xs: 'none', md: 'flex' }, minHeight: 60 }}>
           {treeViewUnfoldMore}
         </Cell>
-        <Cell sx={{ display: { xs: 'none', md: 'flex' }, minHeight: 60 }}>{treeViewUnfoldMore}</Cell>
+        <Cell sx={{ display: { xs: 'none', md: 'flex' }, minHeight: 60 }}>
+          {treeViewUnfoldMore}
+        </Cell>
         <Button
           fullWidth
           onClick={() => setTreeViewCollapsed((bool) => !bool)}

From 3a0db4ede8dffda7737c3702c4e4c3a1e7b71b11 Mon Sep 17 00:00:00 2001
From: Jose Rodolfo Freitas <joserodolfo.freitas@gmail.com>
Date: Mon, 2 Sep 2024 11:00:26 +0200
Subject: [PATCH 07/10] Update zoom on mouse title

---
 docs/src/components/pricing/PricingTable.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 2eae0b8bb478f9..bf9d85fa1a1697 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -588,7 +588,7 @@ const rowHeaders: Record<string, React.ReactNode> = {
   // charts - features
   'charts/legend': <ColumnHead label="Legend" href="/x/react-charts/legend/" />,
   'charts/tooltip': <ColumnHead label="Tooltip" href="/x/react-charts/tooltip/" />,
-  'charts/mouse-zoom': <ColumnHead label="Zoom on mouse" />,
+  'charts/zoom-and-pan': <ColumnHead label="Zoom and Pan" href="/x/react-charts/zoom-and-pan/"/>,
   'charts/export': <ColumnHead label="Export" />,
   // charts - datagrid
   'charts/cell-with-charts': (
@@ -778,7 +778,7 @@ const communityData: Record<string, React.ReactNode> = {
   // charts - features
   'charts/legend': yes,
   'charts/tooltip': yes,
-  'charts/mouse-zoom': no,
+  'charts/zoom-and-pan': no,
   'charts/export': no,
   // charts - datagrid
   'charts/cell-with-charts': yes,
@@ -880,7 +880,7 @@ const proData: Record<string, React.ReactNode> = {
   // charts - features
   'charts/legend': yes,
   'charts/tooltip': yes,
-  'charts/mouse-zoom': yes,
+  'charts/zoom-and-pan': yes,
   'charts/export': pending,
   // charts - datagrid
   'charts/cell-with-charts': yes,
@@ -981,7 +981,7 @@ const premiumData: Record<string, React.ReactNode> = {
   // charts - features
   'charts/legend': yes,
   'charts/tooltip': yes,
-  'charts/mouse-zoom': yes,
+  'charts/zoom-and-pan': yes,
   'charts/export': pending,
   // charts - datagrid
   'charts/cell-with-charts': yes,
@@ -1580,7 +1580,7 @@ export default function PricingTable({
         {divider}
         {renderNestedRow('charts/tooltip')}
         {divider}
-        {renderNestedRow('charts/mouse-zoom')}
+        {renderNestedRow('charts/zoom-and-pan')}
         {divider}
         {renderNestedRow('charts/export')}
         {divider}

From 99e728942b606e547dd2c31cd3721cb26b2042ee Mon Sep 17 00:00:00 2001
From: Jose Rodolfo Freitas <joserodolfo.freitas@gmail.com>
Date: Mon, 2 Sep 2024 11:08:45 +0200
Subject: [PATCH 08/10] prettier

---
 docs/src/components/pricing/PricingTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index bf9d85fa1a1697..18f11f8082bec9 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -588,7 +588,7 @@ const rowHeaders: Record<string, React.ReactNode> = {
   // charts - features
   'charts/legend': <ColumnHead label="Legend" href="/x/react-charts/legend/" />,
   'charts/tooltip': <ColumnHead label="Tooltip" href="/x/react-charts/tooltip/" />,
-  'charts/zoom-and-pan': <ColumnHead label="Zoom and Pan" href="/x/react-charts/zoom-and-pan/"/>,
+  'charts/zoom-and-pan': <ColumnHead label="Zoom and Pan" href="/x/react-charts/zoom-and-pan/" />,
   'charts/export': <ColumnHead label="Export" />,
   // charts - datagrid
   'charts/cell-with-charts': (

From 93f2c178c962242abd04ab70c0e268718fe585c8 Mon Sep 17 00:00:00 2001
From: Jose Rodolfo Freitas <joserodolfo.freitas@gmail.com>
Date: Mon, 2 Sep 2024 14:19:11 +0200
Subject: [PATCH 09/10] Add selection to TreeView

---
 docs/src/components/pricing/PricingTable.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 18f11f8082bec9..85f5a31a366236 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -605,13 +605,16 @@ const rowHeaders: Record<string, React.ReactNode> = {
   ),
 
   // Treeview - advanced features
+  'tree-view/selection': <ColumnHead label="Item Selection" href="/x/react-tree-view/simple-tree-view/selection/#single-selection"/>,
+  'tree-view/multi-selection': <ColumnHead label="Multi Selection" href="/x/react-tree-view/simple-tree-view/selection/#multi-selection" />,
   'tree-view/inline-editing': (
-    <ColumnHead label="Inline editing" href="/x/react-tree-view/rich-tree-view/editing/" />
+    <ColumnHead label="Inline label editing" href="/x/react-tree-view/rich-tree-view/editing/" />
   ),
   'tree-view/drag-to-reorder': (
     <ColumnHead label="Drag to reorder" href="/x/react-tree-view/rich-tree-view/ordering/" />
   ),
   'tree-view/virtualization': <ColumnHead label="Virtualization" />,
+  
 
   'mui-x-production': <ColumnHead label="Perpetual use in production" />,
   'mui-x-development': <ColumnHead label="Development license" tooltip="For active development" />,
@@ -787,6 +790,8 @@ const communityData: Record<string, React.ReactNode> = {
   // Tree View
   'tree-view/simple-tree-view': yes,
   'tree-view/rich-tree-view': yes,
+  'tree-view/selection': yes,
+  'tree-view/multi-selection': yes,
   'tree-view/inline-editing': yes,
   'tree-view/drag-to-reorder': no,
   'tree-view/virtualization': no,
@@ -889,6 +894,8 @@ const proData: Record<string, React.ReactNode> = {
   // Tree View
   'tree-view/simple-tree-view': yes,
   'tree-view/rich-tree-view': yes,
+  'tree-view/selection': yes,
+  'tree-view/multi-selection': yes,
   'tree-view/inline-editing': yes,
   'tree-view/drag-to-reorder': yes,
   'tree-view/virtualization': pending,
@@ -990,6 +997,8 @@ const premiumData: Record<string, React.ReactNode> = {
   // Tree View
   'tree-view/simple-tree-view': yes,
   'tree-view/rich-tree-view': yes,
+  'tree-view/selection': yes,
+  'tree-view/multi-selection': yes,
   'tree-view/inline-editing': yes,
   'tree-view/drag-to-reorder': yes,
   'tree-view/virtualization': pending,
@@ -1655,6 +1664,10 @@ export default function PricingTable({
         {renderNestedRow('tree-view/rich-tree-view')}
         {divider}
         <RowCategory>Advanced features</RowCategory>
+        {renderNestedRow('tree-view/selection')}
+        {divider}
+        {renderNestedRow('tree-view/multi-selection')}
+        {divider}
         {renderNestedRow('tree-view/inline-editing')}
         {divider}
         {renderNestedRow('tree-view/drag-to-reorder')}

From 56fe6710544b2f598f04ac7beba2d5d49ddef981 Mon Sep 17 00:00:00 2001
From: Jose Rodolfo Freitas <joserodolfo.freitas@gmail.com>
Date: Mon, 2 Sep 2024 14:25:51 +0200
Subject: [PATCH 10/10] prettier

---
 .../material-ui-sync/material-ui-sync.md      | 37 ++++++++++---------
 docs/src/components/pricing/PricingTable.tsx  | 15 ++++++--
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/docs/data/material/design-resources/material-ui-sync/material-ui-sync.md b/docs/data/material/design-resources/material-ui-sync/material-ui-sync.md
index d1945703e4749f..97b08cfaa3611b 100644
--- a/docs/data/material/design-resources/material-ui-sync/material-ui-sync.md
+++ b/docs/data/material/design-resources/material-ui-sync/material-ui-sync.md
@@ -251,27 +251,28 @@ const theme = createTheme({
       styleOverrides: {
         root: {
           '&.MuiSwitch-sizeMedium:has(.MuiSwitch-colorPrimary)': {
-            '&:has(.Mui-checked):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible))': {
-              width: '40px',
-              height: '21px',
-              padding: '0',
-              '& .MuiSwitch-switchBase': {
-                transform: 'translateX(19px) translateY(2px)',
+            '&:has(.Mui-checked):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible))':
+              {
+                width: '40px',
+                height: '21px',
                 padding: '0',
-                '& .MuiSwitch-thumb': {
-                  width: '17px',
-                  height: '17px',
-                  background: '#FAFAFA',
-                },
-                '& + .MuiSwitch-track': {
-                  width: '38px',
-                  height: '21px',
-                  background: 'var(--mui-palette-success-light)',
-                  borderRadius: 'var(--mui-shape-borderRadiusRound)',
-                  opacity: '1',
+                '& .MuiSwitch-switchBase': {
+                  transform: 'translateX(19px) translateY(2px)',
+                  padding: '0',
+                  '& .MuiSwitch-thumb': {
+                    width: '17px',
+                    height: '17px',
+                    background: '#FAFAFA',
+                  },
+                  '& + .MuiSwitch-track': {
+                    width: '38px',
+                    height: '21px',
+                    background: 'var(--mui-palette-success-light)',
+                    borderRadius: 'var(--mui-shape-borderRadiusRound)',
+                    opacity: '1',
+                  },
                 },
               },
-            },
           },
         },
       },
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 85f5a31a366236..17268e6d19e938 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -605,8 +605,18 @@ const rowHeaders: Record<string, React.ReactNode> = {
   ),
 
   // Treeview - advanced features
-  'tree-view/selection': <ColumnHead label="Item Selection" href="/x/react-tree-view/simple-tree-view/selection/#single-selection"/>,
-  'tree-view/multi-selection': <ColumnHead label="Multi Selection" href="/x/react-tree-view/simple-tree-view/selection/#multi-selection" />,
+  'tree-view/selection': (
+    <ColumnHead
+      label="Item Selection"
+      href="/x/react-tree-view/simple-tree-view/selection/#single-selection"
+    />
+  ),
+  'tree-view/multi-selection': (
+    <ColumnHead
+      label="Multi Selection"
+      href="/x/react-tree-view/simple-tree-view/selection/#multi-selection"
+    />
+  ),
   'tree-view/inline-editing': (
     <ColumnHead label="Inline label editing" href="/x/react-tree-view/rich-tree-view/editing/" />
   ),
@@ -614,7 +624,6 @@ const rowHeaders: Record<string, React.ReactNode> = {
     <ColumnHead label="Drag to reorder" href="/x/react-tree-view/rich-tree-view/ordering/" />
   ),
   'tree-view/virtualization': <ColumnHead label="Virtualization" />,
-  
 
   'mui-x-production': <ColumnHead label="Perpetual use in production" />,
   'mui-x-development': <ColumnHead label="Development license" tooltip="For active development" />,