[charts] Add "use client" directive to every public component and h…

…ook (#14578)

packages/rsc-builder/buildRsc.ts

@@ -23,6 +23,14 @@ const PROJECTS: Project[] = [
     name: 'x-date-pickers-pro',
     rootPath: path.join(process.cwd(), 'packages/x-date-pickers-pro'),
   },
+  {
+    name: 'x-charts',
+    rootPath: path.join(process.cwd(), 'packages/x-charts'),
+  },
+  {
+    name: 'x-charts-pro',
+    rootPath: path.join(process.cwd(), 'packages/x-charts-pro'),
+  },
 ];
 
 async function processFile(

packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';

packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ChartContainerProps } from '@mui/x-charts/ChartContainer';

packages/x-charts-pro/src/ChartContainerPro/useChartContainerProProps.ts

@@ -1,3 +1,4 @@
+'use client';
 import { useChartContainerProps } from '@mui/x-charts/internals';
 import { ZoomProviderProps } from '../context/ZoomProvider';
 import type { ChartContainerProProps } from './ChartContainerPro';

packages/x-charts-pro/src/Heatmap/DefaultHeatmapTooltip.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/x-charts-pro/src/Heatmap/Heatmap.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';

packages/x-charts-pro/src/Heatmap/HeatmapPlot.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useXScale, useYScale, useZColorScale } from '@mui/x-charts/hooks';

packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';

packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Watermark } from '@mui/x-license/Watermark';

packages/x-charts-pro/src/ResponsiveChartContainerPro/useResponsiveChartContainerProProps.ts

@@ -1,3 +1,4 @@
+'use client';
 import { useResponsiveChartContainerProps } from '@mui/x-charts/internals';
 import type { ChartContainerProProps } from '../ChartContainerPro';
 import type { ResponsiveChartContainerProProps } from './ResponsiveChartContainerPro';

packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';

packages/x-charts-pro/src/context/CartesianProviderPro/CartesianProviderPro.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import {
   useDrawingArea,

packages/x-charts-pro/src/context/ZoomProvider/ZoomProvider.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
 import { Initializable } from '@mui/x-charts/internals';

packages/x-charts-pro/src/context/ZoomProvider/useSetupPan.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useDrawingArea, useSvgRef } from '@mui/x-charts/hooks';
 import { getSVGPoint } from '@mui/x-charts/internals';

packages/x-charts-pro/src/context/ZoomProvider/useSetupZoom.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useDrawingArea, useSvgRef } from '@mui/x-charts/hooks';
 import { getSVGPoint } from '@mui/x-charts/internals';

packages/x-charts-pro/src/context/ZoomProvider/useZoom.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { ZoomContext } from './ZoomContext';
 import { ZoomState } from './Zoom.types';

packages/x-charts-pro/src/hooks/useSeries.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useSeries } from '@mui/x-charts/internals';
 

packages/x-charts/src/BarChart/BarChart.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';

packages/x-charts/src/BarChart/BarElement.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';

packages/x-charts/src/BarChart/BarLabel/BarLabel.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { animated } from '@react-spring/web';

packages/x-charts/src/BarChart/BarPlot.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';

packages/x-charts/src/BarChart/useBarChartProps.ts

@@ -1,3 +1,4 @@
+'use client';
 import useId from '@mui/utils/useId';
 import type { BarChartProps } from './BarChart';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';

packages/x-charts/src/ChartContainer/ChartContainer.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DrawingProvider, DrawingProviderProps } from '../context/DrawingProvider';

packages/x-charts/src/ChartContainer/useChartContainerProps.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import type { DrawingProviderProps } from '../context/DrawingProvider';

packages/x-charts/src/ChartContainer/useDefaultizeAxis.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import { MakeOptional } from '../models/helpers';

packages/x-charts/src/ChartsAxis/ChartsAxis.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useCartesianContext } from '../context/CartesianProvider';

packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';

packages/x-charts/src/ChartsClipPath/ChartsClipPath.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDrawingArea } from '../hooks/useDrawingArea';

packages/x-charts/src/ChartsGrid/ChartsGrid.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';

packages/x-charts/src/ChartsLegend/ChartsLegend.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';

packages/x-charts/src/ChartsLegend/ContinuousColorLegend.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ScaleSequential } from '@mui/x-charts-vendor/d3-scale';

packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedSeries } from '../context/SeriesProvider';

packages/x-charts/src/ChartsLegend/LegendPerItem.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import NoSsr from '@mui/material/NoSsr';
 import { useTheme, styled } from '@mui/material/styles';

packages/x-charts/src/ChartsLegend/PiecewiseColorLegend.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { AxisDefaultized } from '../models/axis';

packages/x-charts/src/ChartsLegend/useAxis.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
 import { AxisDefaultized } from '../models/axis';

packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { InteractionContext } from '../context/InteractionProvider';

packages/x-charts/src/ChartsOverlay/ChartsLoadingOverlay.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { useDrawingArea } from '../hooks/useDrawingArea';

packages/x-charts/src/ChartsOverlay/ChartsNoDataOverlay.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { useDrawingArea } from '../hooks/useDrawingArea';

packages/x-charts/src/ChartsOverlay/ChartsOverlay.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';

packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ChartsXReferenceLine, ChartsXReferenceLineProps } from './ChartsXReferenceLine';

packages/x-charts/src/ChartsReferenceLine/ChartsXReferenceLine.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import { warnOnce } from '@mui/x-internals/warning';

packages/x-charts/src/ChartsReferenceLine/ChartsYReferenceLine.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import { warnOnce } from '@mui/x-internals/warning';

packages/x-charts/src/ChartsSurface/ChartsSurface.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { styled, SxProps, Theme, useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import * as React from 'react';

packages/x-charts/src/ChartsText/ChartsText.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GetWordsByLinesParams, getWordsByLines } from '../internals/getWordsByLines';

packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';

packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Delaunay } from '@mui/x-charts-vendor/d3-delaunay';

packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';

packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';

packages/x-charts/src/Gauge/Gauge.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';

packages/x-charts/src/Gauge/GaugeContainer.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';

packages/x-charts/src/Gauge/GaugeReferenceArc.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { styled } from '@mui/material/styles';

packages/x-charts/src/Gauge/GaugeValueArc.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { styled } from '@mui/material/styles';

packages/x-charts/src/Gauge/GaugeValueText.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGaugeState } from './GaugeProvider';

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

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';

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

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { animated, useTransition } from '@react-spring/web';

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

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';

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

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { area as d3Area } from '@mui/x-charts-vendor/d3-shape';

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

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';

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

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';

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

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';

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

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';

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

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';

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

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';

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

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useCartesianContext } from '../context/CartesianProvider';

packages/x-charts/src/LineChart/useLineChartProps.ts

@@ -1,3 +1,4 @@
+'use client';
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import type { LineChartProps } from './LineChart';

packages/x-charts/src/PieChart/PieArc.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';

packages/x-charts/src/PieChart/PieArcLabel.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { animated, SpringValue, to } from '@react-spring/web';

packages/x-charts/src/PieChart/PieArcLabelPlot.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';

packages/x-charts/src/PieChart/PieArcPlot.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';

packages/x-charts/src/PieChart/PieChart.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useRtl } from '@mui/system/RtlProvider';

packages/x-charts/src/PieChart/PiePlot.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DrawingContext } from '../context/DrawingProvider';

packages/x-charts/src/PieChart/dataTransform/useTransformData.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import {
   ComputedPieRadius,

packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ChartContainer, ChartContainerProps } from '../ChartContainer';

packages/x-charts/src/ResponsiveChartContainer/useChartContainerDimensions.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';

packages/x-charts/src/ResponsiveChartContainer/useResponsiveChartContainerProps.ts

@@ -1,3 +1,4 @@
+'use client';
 import { ChartContainerProps } from '../ChartContainer';
 import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer';
 import { useChartContainerDimensions } from './useChartContainerDimensions';

packages/x-charts/src/ScatterChart/Scatter.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import {