Merge branch 'master' into vitest-x-browser-working

Author: JCQuintas

docs/data/charts/export/export.md

@@ -8,7 +8,7 @@ components: ScatterChartPro, BarChartPro, LineChartPro
 
 <p class="description">Charts can be printed and exported as PDF.</p>
 
-Export is available on the **Pro**[<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') versions of the charts: `<LineChartPro />`, `<BarChartPro />`, `<ScatterChartPro />`.
+Export is available on the Pro version of the charts: `<LineChartPro />`, `<BarChartPro />`, `<ScatterChartPro />`.
 
 ## Print/Export as PDF
 

docs/data/charts/funnel/funnel.md

@@ -8,6 +8,10 @@ components: FunnelChart, FunnelPlot
 
 <p class="description">Funnel charts allow to express quantity evolution along a process, such as audience engagement, population education levels or yields of multiple processes.</p>
 
+:::info
+This feature is in preview. It is ready for production use, but its API, visuals and behavior may change in future minor or patch releases.
+:::
+
 ## Basics
 
 Funnel charts series must contain a `data` property containing an array of objects.

docs/data/charts/radar/radar.md

@@ -8,6 +8,10 @@ components: RadarChart, RadarGrid, RadarSeriesArea, RadarSeriesMarks, RadarSerie
 
 <p class="description">Radar allows to compare multivariate data in a 2D chart.</p>
 
+:::info
+This feature is in preview. It is ready for production use, but its API, visuals and behavior may change in future minor or patch releases.
+:::
+
 ## Basics
 
 Radar charts series should contain a `data` property containing an array of values.

docs/data/charts/toolbar/toolbar.md

@@ -8,8 +8,8 @@ components: Toolbar, ToolbarButton, ChartsToolbarPro
 
 <p class="description">Charts can display a toolbar for easier access to certain functionality.</p>
 
-:::warning
-This feature is unstable and its API, visuals and/or behavior may change in future minor or patch releases.
+:::info
+This feature is in preview. It is ready for production use, but its API, visuals and behavior may change in future minor or patch releases.
 :::
 
 Charts provide a toolbar that can be enabled to give users quick access to certain features.

docs/data/charts/zoom-and-pan/zoom-and-pan.md

@@ -8,7 +8,7 @@ components: ScatterChartPro, BarChartPro, LineChartPro, ChartZoomSlider
 
 <p class="description">Enables zooming and panning on specific charts or axis.</p>
 
-Zooming is possible on the **Pro**[<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') versions of the charts: `<LineChartPro />`, `<BarChartPro />`, `<ScatterChartPro />`.
+Zooming is possible on the Pro version of the charts: `<LineChartPro />`, `<BarChartPro />`, `<ScatterChartPro />`.
 
 ## Basic usage
 
@@ -54,8 +54,8 @@ See how the secondary axis adapts to the visible part of the primary axis in the
 
 ## Zoom slider 🧪
 
-:::warning
-This feature is unstable and its API, visuals and/or behavior may change in future minor or patch releases.
+:::info
+This feature is in preview. It is ready for production use, but its API, visuals and behavior may change in future minor or patch releases.
 :::
 
 You can provide an overview and allow the manipulation of the zoomed area by setting the `zoom.slider.enabled` property on the axis config.

docs/data/pages.ts

@@ -546,7 +546,7 @@ const pages: MuiPage[] = [
                 title: 'Export',
                 plan: 'pro',
               },
-              { pathname: '/x/react-charts/toolbar', title: 'Toolbar 🧪' },
+              { pathname: '/x/react-charts/toolbar', title: 'Toolbar', unstable: true },
             ],
           },
           {

packages/x-charts/src/LineChart/AppearingMask.tsx

@@ -2,7 +2,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import clsx from 'clsx';
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from '../internals/animation/animation';
 import { cleanId } from '../internals/cleanId';
 import { useChartId, useDrawingArea } from '../hooks';
@@ -44,13 +43,13 @@ const AnimatedRect = styled('rect')({
 export function AppearingMask(props: AppearingMaskProps) {
   const drawingArea = useDrawingArea();
   const chartId = useChartId();
-
   const clipId = cleanId(`${chartId}-${props.id}`);
+
   return (
     <React.Fragment>
       <clipPath id={clipId}>
         <AnimatedRect
-          className={clsx(!props.skipAnimation && appearingMaskClasses.animate)}
+          className={props.skipAnimation ? '' : appearingMaskClasses.animate}
           x={0}
           y={0}
           width={drawingArea.left + drawingArea.width + drawingArea.right}

packages/x-data-grid/src/components/GridScrollArea.tsx

@@ -1,6 +1,5 @@
 'use client';
 import * as React from 'react';
-import clsx from 'clsx';
 import useEventCallback from '@mui/utils/useEventCallback';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
@@ -174,7 +173,7 @@ function GridScrollAreaContent(props: ScrollAreaProps) {
   return (
     <GridScrollAreaRawRoot
       ref={rootRef}
-      className={clsx(classes.root)}
+      className={classes.root}
       ownerState={ownerState}
       onDragOver={handleDragOver}
       style={style}

packages/x-data-grid/src/components/base/GridOverlays.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
-import clsx from 'clsx';
 import { minimalContentHeight } from '../../hooks/features/rows/gridRowsUtils';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridDimensionsSelector } from '../../hooks/features/dimensions';
@@ -92,12 +91,12 @@ export function GridOverlayWrapper(props: React.PropsWithChildren<GridOverlaysPr
 
   return (
     <GridOverlayWrapperRoot
-      className={clsx(classes.root)}
+      className={classes.root}
       {...props}
       right={dimensions.columnsTotalWidth - dimensions.viewportOuterSize.width}
     >
       <GridOverlayWrapperInner
-        className={clsx(classes.inner)}
+        className={classes.inner}
         style={{
           height,
           width: dimensions.viewportOuterSize.width,