@mui/x-charts-pro 8.0.0-alpha.7 → 8.0.0-alpha.8

package/BarChartPro/BarChartPro.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BarChartProps } from '@mui/x-charts/BarChart';
-import { ZoomProps } from '../context/ZoomProvider';
-export interface BarChartProProps extends BarChartProps, ZoomProps {
+import { ChartContainerProProps } from '../ChartContainerPro';
+export interface BarChartProProps extends Omit<BarChartProps, 'apiRef'>, Omit<ChartContainerProProps<'bar'>, 'series' | 'plugins' | 'seriesConfig'> {
 }
 /**
  * Demos:

package/BarChartPro/BarChartPro.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["zoom", "onZoomChange"];
+const _excluded = ["initialZoom", "onZoomChange", "apiRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
@@ -16,16 +16,13 @@ import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { useBarChartProps, ChartsWrapper } from '@mui/x-charts/internals';
+import { ChartDataProvider } from '@mui/x-charts/context';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
-import { ZoomSetup } from "../context/ZoomProvider/ZoomSetup.js";
-import { useZoom } from "../context/ZoomProvider/useZoom.js";
+import { useIsZoomInteracting } from "../hooks/zoom/index.js";
 import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
-import { ChartDataProviderPro } from "../context/ChartDataProviderPro/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function BarChartPlotZoom(props) {
-  const {
-    isInteracting
-  } = useZoom();
+  const isInteracting = useIsZoomInteracting();
   return /*#__PURE__*/_jsx(BarPlot, _extends({}, props, {
     skipAnimation: isInteracting || undefined
   }));
@@ -86,8 +83,9 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps,
     name: 'MuiBarChartPro'
   });
   const {
-      zoom,
-      onZoomChange
+      initialZoom,
+      onZoomChange,
+      apiRef
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -107,16 +105,19 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps,
   const {
     chartDataProviderProProps,
     chartsSurfaceProps
-  } = useChartContainerProProps(chartContainerProps, ref);
+  } = useChartContainerProProps(_extends({}, chartContainerProps, {
+    apiRef
+  }), ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
-  return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
-    zoom: zoom,
+  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProProps, {
+    apiRef: apiRef,
+    initialZoom: initialZoom,
     onZoomChange: onZoomChange,
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(BarChartPlotZoom, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), /*#__PURE__*/_jsx(ZoomSetup, {}), children]
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
       }))]
     }))
   }));
@@ -126,6 +127,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: PropTypes.shape({
+    current: PropTypes.shape({
+      setZoomData: PropTypes.func.isRequired
+    })
+  }),
   /**
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
@@ -194,6 +200,19 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     dataIndex: PropTypes.number,
     seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
+  /**
+   * The list of zoom data related to each axis.
+   */
+  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.number.isRequired
+  })),
   /**
    * The direction of the bar elements.
    * @default 'vertical'
@@ -214,7 +233,6 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * 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,
@@ -274,6 +292,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    */
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
    * Indicate which axis to display the top of the charts.
@@ -408,12 +427,29 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     }), PropTypes.bool])
   })),
   /**
-   * The list of zoom data related to each axis.
+   * The configuration of the z-axes.
    */
-  zoom: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    end: PropTypes.number.isRequired,
-    start: PropTypes.number.isRequired
+  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
   }))
 } : void 0;
 export { BarChartPro };

package/CHANGELOG.md

@@ -5,6 +5,121 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-alpha.8
+
+_Jan 16, 2025_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🍬 Improved design for Data Grid [Header filters](https://next.mui.com/x/react-data-grid/filtering/header-filters/)
+
+  <img width="100%" alt="Data Grid Header filters" src="https://github.com/user-attachments/assets/74a50cd9-7a55-41fc-a2b8-f8a0d5b9120e" />
+
+- 🔄 Data Grid [Scroll restoration](https://next.mui.com/x/react-data-grid/scrolling/#scroll-restoration)
+- 📊 Charts support server-side rendering under [some conditions](https://next.mui.com/x/react-charts/getting-started/#server-side-rendering)
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@lauri865.
+Following are all team members who have contributed to this release:
+@arminmeh, @romgrk, @samuelsycamore, @alexfauquette, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- The clear button in header filter cells has been moved to the header filter menu. Use `slotProps={{ headerFilterCell: { showClearIcon: true } }}` to restore the clear button in the cell.
+
+#### `@mui/x-data-grid@8.0.0-alpha.8`
+
+- [DataGrid] Improve scrollbar deadzone with overlay scrollbars (#15961) @lauri865
+- [DataGrid] Header filter design improvements (#15991) @KenanYusuf
+- [DataGrid] Scroll restoration (#15623) @lauri865
+- [DataGrid] Fix row, cell and header memoizations (#15666) @lauri865
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.8` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.0.0-alpha.8`, plus:
+
+- [DataGridPro] Add test for column pinning with disabled column virtualization (#16176) @cherniavskii
+- [DataGridPro] Fix width of right-pinned column group during resize (#16199) @cherniavskii
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.8` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.8`.
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The field is now editable if rendered inside a mobile Picker — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#field-editing-on-mobile-pickers)
+- The `useMultiInputDateRangeField`, `useMultiInputTimeRangeField`, and `useMultiInputDateTimeRangeField` hooks have been removed in favor of the new `useMultiInputRangeField` hook — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#usemultiinputdaterangefield)
+- The component passed to the `field` slot no longer receives the `value`, `onChange`, `timezone`, `format`, `disabled`, `formatDensity`, `enableAccessibleFieldDOMStructure`, `selectedSections` and `onSelectedSectionsChange` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-field)
+
+#### `@mui/x-date-pickers@8.0.0-alpha.8`
+
+- [pickers] Let the field components handle their opening UI, and allow field editing on mobile pickers (#15671) @flaviendelangle
+- [pickers] Remove code duplication for the multi input range fields (#15505) @flaviendelangle
+- [pickers] Rename `onRangePositionChange` into `setRangePosition` in `usePickerRangePositionContext` (#16189) @flaviendelangle
+- [pickers] Use context to pass props from the picker to the field (#16042) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.8` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.0.0-alpha.8`.
+
+### Charts
+
+#### Breaking changes
+
+- Charts tooltip markers now have different styles for each chart type. The tooltip and legend marks are now the same.
+- Duplicate axis id's across `x` and `y` axis now log a warning in dev mode. Axis ids should be unique to prevent internal issues.
+
+#### `@mui/x-charts@8.0.0-alpha.8`
+
+- [charts] Fix flaky charts tests (#16180) @JCQuintas
+- [charts] Handle case where gradient stop `offset` could be `Infinite` (#16131) @JCQuintas
+- [charts] Make `useChartGradientId` public (#16106) @JCQuintas
+- [charts] Move z-axis to plugin (#16130) @alexfauquette
+- [charts] Plot data at first render if `skipAnimation` is set to `true` (#16166) @alexfauquette
+- [charts] Replace tooltip mark with style (#16117) @JCQuintas
+- [charts] Support `rtl` for gradient legend (#16115) @JCQuintas
+- [charts] Use plugin system for series and axes (#15865) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-alpha.8` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-alpha.8`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.8`
+
+No changes since `@mui/x-tree-view-pro@v8.0.0-alpha.7`.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.8` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-alpha.8`.
+
+### Docs
+
+- [docs] Add example for custom legend (#16169) @alexfauquette
+- [docs] Add full custom field creation example (#15194) @flaviendelangle
+- [docs] Copyedit the Data Grid cell selection page (#16099) @samuelsycamore
+- [docs] Fix demo rendering issue on Codesandbox (#16118) @arminmeh
+- [docs] Remove broken links (#16167) @alexfauquette
+- [docs] Split the Data Grid editing page (#14931) @MBilalShafi
+- [docs] Fix wrong props warnings (#16119) @JCQuintas
+
+### Core
+
+- [core] Type all references as `RefObject` (#16124) @arminmeh
+- [code-infra] Refactor `react` and `react-dom` definitions to simplify dep resolving (#16160) @LukasTy
+- [code-infra] Stop renovate from updating `date-fns-v2` (#16158) @LukasTy
+- [infra] Improve cherry-pick action target list (#16184) @michelengelen
+- [test] Fix flaky column pinning unit test (#16202) @cherniavskii
+- [test] Fix flaky screenshot (#16182) @cherniavskii
+
 ## 8.0.0-alpha.7
 
 _Jan 9, 2025_

package/ChartContainerPro/ChartContainerPro.d.ts

@@ -1,7 +1,35 @@
 import * as React from 'react';
-import { ChartContainerProps } from '@mui/x-charts/ChartContainer';
-import { ZoomProps } from '../context/ZoomProvider';
-export interface ChartContainerProProps extends ChartContainerProps, ZoomProps {
+import { ChartsSurfaceProps } from '@mui/x-charts/ChartsSurface';
+import { ChartDataProviderProps } from '@mui/x-charts/context';
+import { ChartSeriesType } from '@mui/x-charts/internals';
+import { AllPluginSignatures } from '../internals/plugins/allPlugins';
+export interface ChartContainerProProps<TSeries extends ChartSeriesType = ChartSeriesType> extends ChartDataProviderProps<TSeries, AllPluginSignatures<TSeries>>, ChartsSurfaceProps {
 }
-declare const ChartContainerPro: React.ForwardRefExoticComponent<ChartContainerProProps & React.RefAttributes<SVGSVGElement>>;
+/**
+ * It sets up the data providers as well as the `<svg>` for the chart.
+ *
+ * This is a combination of both the `ChartDataProvider` and `ChartsSurface` components.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartContainer API](https://mui.com/x/api/charts/chart-container/)
+ *
+ * @example
+ * ```jsx
+ * <ChartContainerPro
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *    <BarPlot />
+ *    <ChartsXAxis position="bottom" axisId="x-axis" />
+ * </ChartContainerPro>
+ * ```
+ */
+declare const ChartContainerPro: <TSeries extends ChartSeriesType = ChartSeriesType>(props: ChartContainerProProps<TSeries> & {
+    ref?: React.ForwardedRef<SVGSVGElement>;
+}) => React.JSX.Element;
 export { ChartContainerPro };

package/ChartContainerPro/ChartContainerPro.js

@@ -4,19 +4,46 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Watermark } from '@mui/x-license/Watermark';
+import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { ChartDataProvider } from '@mui/x-charts/context';
 import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
-import { ChartDataProviderPro } from "../context/ChartDataProviderPro/index.js";
 import { useChartContainerProProps } from "./useChartContainerProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
-const ChartContainerPro = /*#__PURE__*/React.forwardRef(function ChartContainerPro(props, ref) {
+
+/**
+ * It sets up the data providers as well as the `<svg>` for the chart.
+ *
+ * This is a combination of both the `ChartDataProvider` and `ChartsSurface` components.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartContainer API](https://mui.com/x/api/charts/chart-container/)
+ *
+ * @example
+ * ```jsx
+ * <ChartContainerPro
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *    <BarPlot />
+ *    <ChartsXAxis position="bottom" axisId="x-axis" />
+ * </ChartContainerPro>
+ * ```
+ */
+const ChartContainerPro = /*#__PURE__*/React.forwardRef(function ChartContainerProInner(props, ref) {
   const {
     chartDataProviderProProps,
     children,
     chartsSurfaceProps
   } = useChartContainerProProps(props, ref);
-  return /*#__PURE__*/_jsxs(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
+  useLicenseVerifier('x-charts-pro', releaseInfo);
+  return /*#__PURE__*/_jsxs(ChartDataProvider, _extends({}, chartDataProviderProProps, {
     children: [/*#__PURE__*/_jsx(ChartsSurface, _extends({}, chartsSurfaceProps, {
       children: children
     })), /*#__PURE__*/_jsx(Watermark, {
@@ -25,11 +52,19 @@ const ChartContainerPro = /*#__PURE__*/React.forwardRef(function ChartContainerP
     })]
   }));
 });
+
+// @ts-ignore
+
 process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: PropTypes.shape({
+    current: PropTypes.shape({
+      setZoomData: PropTypes.func.isRequired
+    })
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**
@@ -59,11 +94,23 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
     dataIndex: PropTypes.number,
     seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
+  /**
+   * The list of zoom data related to each axis.
+   */
+  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.number.isRequired
+  })),
   /**
    * 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,
@@ -83,23 +130,19 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
    * @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,
+  series: PropTypes.arrayOf(PropTypes.object),
   /**
    * 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]),
+  theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
@@ -251,14 +294,6 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
     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
   }))
 } : void 0;
 export { ChartContainerPro };

package/ChartContainerPro/useChartContainerProProps.d.ts

@@ -1,8 +1,8 @@
-import { UseChartContainerPropsReturnValue } from '@mui/x-charts/internals';
+import { ChartDataProviderProps, ChartSeriesType, UseChartContainerPropsReturnValue } from '@mui/x-charts/internals';
 import * as React from 'react';
-import type { ChartDataProviderProProps } from '../context/ChartDataProviderPro';
 import type { ChartContainerProProps } from './ChartContainerPro';
-export type UseChartContainerProPropsReturnValue = Omit<UseChartContainerPropsReturnValue, 'chartDataProviderProps'> & {
-    chartDataProviderProProps: ChartDataProviderProProps;
+import { AllPluginSignatures } from '../internals/plugins/allPlugins';
+export type UseChartContainerProPropsReturnValue<TSeries extends ChartSeriesType> = Pick<UseChartContainerPropsReturnValue<TSeries>, 'chartsSurfaceProps' | 'children'> & {
+    chartDataProviderProProps: ChartDataProviderProps<TSeries, AllPluginSignatures<TSeries>>;
 };
-export declare const useChartContainerProProps: (props: ChartContainerProProps, ref: React.Ref<SVGSVGElement>) => UseChartContainerProPropsReturnValue;
+export declare const useChartContainerProProps: <TSeries extends ChartSeriesType = keyof import("@mui/x-charts/internals").ChartsSeriesConfig>(props: ChartContainerProProps<TSeries>, ref: React.Ref<SVGSVGElement>) => UseChartContainerProPropsReturnValue<TSeries>;

package/ChartContainerPro/useChartContainerProProps.js

@@ -2,16 +2,19 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["zoom", "onZoomChange"];
+const _excluded = ["initialZoom", "onZoomChange", "plugins", "apiRef"];
 import { useChartContainerProps } from '@mui/x-charts/internals';
+import { ALL_PLUGINS } from "../internals/plugins/allPlugins.js";
 export const useChartContainerProProps = (props, ref) => {
   const {
-      zoom,
-      onZoomChange
+      initialZoom,
+      onZoomChange,
+      plugins,
+      apiRef
     } = props,
     baseProps = _objectWithoutPropertiesLoose(props, _excluded);
   const chartDataProviderProProps = {
-    zoom,
+    initialZoom,
     onZoomChange
   };
   const {
@@ -20,7 +23,10 @@ export const useChartContainerProProps = (props, ref) => {
     children
   } = useChartContainerProps(baseProps, ref);
   return {
-    chartDataProviderProProps: _extends({}, chartDataProviderProps, chartDataProviderProProps),
+    chartDataProviderProProps: _extends({}, chartDataProviderProps, chartDataProviderProProps, {
+      apiRef,
+      plugins: plugins ?? ALL_PLUGINS
+    }),
     chartsSurfaceProps,
     children
   };

package/Heatmap/Heatmap.js

@@ -17,6 +17,9 @@ import { HeatmapTooltip } from "./HeatmapTooltip.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
 const defaultColorMap = interpolateRgbBasis(['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081']);
+const seriesConfig = {
+  heatmap: heatmapPlugin
+};
 const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -66,7 +69,7 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
   const Tooltip = props.slots?.tooltip ?? HeatmapTooltip;
   return /*#__PURE__*/_jsxs(ChartContainerPro, {
     ref: ref,
-    plugins: [heatmapPlugin],
+    seriesConfig: seriesConfig,
     series: series.map(s => _extends({
       type: 'heatmap'
     }, s)),
@@ -111,6 +114,11 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: PropTypes.shape({
+    current: PropTypes.shape({
+      setZoomData: PropTypes.func.isRequired
+    })
+  }),
   /**
    * Indicate which axis to display the bottom of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
@@ -146,6 +154,19 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     dataIndex: PropTypes.number,
     seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
+  /**
+   * The list of zoom data related to each axis.
+   */
+  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.number.isRequired
+  })),
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -161,7 +182,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * 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,
@@ -193,6 +213,11 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * An array of [[HeatmapSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * The configuration helpers used to compute attributes according to the serries type.
+   * @ignore Unstable props for internal usage.
+   */
+  seriesConfig: PropTypes.object,
   /**
    * The props used for each component slot.
    * @default {}
@@ -204,6 +229,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    */
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
    * The configuration of the tooltip.

package/Heatmap/HeatmapTooltip.js

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import composeClasses from '@mui/utils/composeClasses';
-import { ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipRow, ChartsTooltipCell, ChartsTooltipMark, useItemTooltip, getChartsTooltipUtilityClass, ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
+import { ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipRow, ChartsTooltipCell, useItemTooltip, getChartsTooltipUtilityClass, ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
 import { useXAxis, useYAxis } from '@mui/x-charts/hooks';
-import { getLabel } from '@mui/x-charts/internals';
+import { getLabel, ChartsLabelMark } from '@mui/x-charts/internals';
 import { useHeatmapSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -47,7 +47,8 @@ function DefaultHeatmapTooltipContent(props) {
   const {
     color,
     value,
-    identifier
+    identifier,
+    markType
   } = tooltipData;
   const [xIndex, yIndex] = value;
   const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
@@ -80,7 +81,8 @@ function DefaultHeatmapTooltipContent(props) {
           className: classes?.row,
           children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
             className: clsx(classes?.markCell, classes?.cell),
-            children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
+            children: /*#__PURE__*/_jsx(ChartsLabelMark, {
+              type: markType,
               color: color,
               className: classes?.mark
             })

package/Heatmap/extremums.d.ts

@@ -1,2 +1,2 @@
-import { ExtremumGetter } from '@mui/x-charts/internals';
-export declare const getBaseExtremum: ExtremumGetter<'heatmap'>;
+import { CartesianExtremumGetter } from '@mui/x-charts/internals';
+export declare const getBaseExtremum: CartesianExtremumGetter<'heatmap'>;

package/Heatmap/formatter.d.ts

@@ -1,3 +1,3 @@
-import { SeriesFormatter } from '@mui/x-charts/internals';
-declare const formatter: SeriesFormatter<'heatmap'>;
+import { SeriesProcessor } from '@mui/x-charts/internals';
+declare const formatter: SeriesProcessor<'heatmap'>;
 export default formatter;

package/Heatmap/formatter.js

@@ -9,7 +9,8 @@ const formatter = params => {
     defaultizedSeries[seriesId] = _extends({
       // Defaultize the data and the value formatter.
       valueFormatter: v => v[2].toString(),
-      data: []
+      data: [],
+      labelMarkType: 'square'
     }, series[seriesId]);
   });
   return {

package/Heatmap/plugin.d.ts

@@ -1,2 +1,2 @@
-import { ChartsPlugin } from '@mui/x-charts/internals';
-export declare const plugin: ChartsPlugin<'heatmap'>;
+import { ChartSeriesTypeConfig } from '@mui/x-charts/internals';
+export declare const plugin: ChartSeriesTypeConfig<'heatmap'>;

package/Heatmap/plugin.js

@@ -2,8 +2,7 @@ import { getBaseExtremum } from "./extremums.js";
 import formatter from "./formatter.js";
 import getColor from "./getColor.js";
 export const plugin = {
-  seriesType: 'heatmap',
-  seriesFormatter: formatter,
+  seriesProcessor: formatter,
   colorProcessor: getColor,
   xExtremumGetter: getBaseExtremum,
   yExtremumGetter: getBaseExtremum