@mui/x-charts 7.7.0 → 7.8.0

package/BarChart/BarLabel/BarLabelPlot.d.ts

@@ -10,7 +10,4 @@ type BarLabelPlotProps = {
  * @ignore - internal component.
  */
 declare function BarLabelPlot(props: BarLabelPlotProps): React.JSX.Element;
-declare namespace BarLabelPlot {
-    var propTypes: any;
-}
 export { BarLabelPlot };

package/BarChart/BarLabel/BarLabelPlot.js

@@ -8,7 +8,6 @@ exports.BarLabelPlot = BarLabelPlot;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _web = require("@react-spring/web");
 var _BarLabelItem = require("./BarLabelItem");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -81,26 +80,4 @@ function BarLabelPlot(props) {
       style: style
     })))
   });
-}
-process.env.NODE_ENV !== "production" ? BarLabelPlot.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  barLabel: _propTypes.default.oneOfType([_propTypes.default.oneOf(['value']), _propTypes.default.func]),
-  bars: _propTypes.default.arrayOf(_propTypes.default.shape({
-    color: _propTypes.default.string.isRequired,
-    dataIndex: _propTypes.default.number.isRequired,
-    height: _propTypes.default.number.isRequired,
-    layout: _propTypes.default.oneOf(['horizontal', 'vertical']),
-    maskId: _propTypes.default.string.isRequired,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    value: _propTypes.default.number,
-    width: _propTypes.default.number.isRequired,
-    x: _propTypes.default.number.isRequired,
-    xOrigin: _propTypes.default.number.isRequired,
-    y: _propTypes.default.number.isRequired,
-    yOrigin: _propTypes.default.number.isRequired
-  })).isRequired,
-  skipAnimation: _propTypes.default.bool
-} : void 0;
+}

package/BarChart/BarLabel/getBarLabel.d.ts

@@ -1,7 +1,7 @@
 import { SeriesId } from '../../models/seriesType/common';
 import { BarLabelFunction } from './BarLabel.types';
 export declare const getBarLabel: (options: {
-    barLabel: 'value' | BarLabelFunction;
+    barLabel: "value" | BarLabelFunction;
     value: number | null;
     dataIndex: number;
     seriesId: SeriesId;

package/BarChart/BarPlot.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _web = require("@react-spring/web");
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _BarElement = require("./BarElement");
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _hooks = require("../hooks");
@@ -55,7 +55,7 @@ const useAggregatedData = () => {
     stackingGroups: [],
     seriesOrder: []
   };
-  const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const axisData = (0, _CartesianProvider.useCartesianContext)();
   const chartId = (0, _hooks.useChartId)();
   const {
     series,

package/BarChart/checkScaleErrors.d.ts

@@ -1,11 +1,7 @@
-import { AxisDefaultized } from '../models/axis';
+import { AxisDefaultized, AxisId } from '../models/axis';
 import { SeriesId } from '../models/seriesType/common';
-export declare function checkScaleErrors(verticalLayout: boolean, seriesId: SeriesId, xAxisKey: string, xAxis: {
-    DEFAULT_X_AXIS_KEY: AxisDefaultized;
-} & {
-    [axisKey: string]: AxisDefaultized;
-}, yAxisKey: string, yAxis: {
-    DEFAULT_X_AXIS_KEY: AxisDefaultized;
-} & {
-    [axisKey: string]: AxisDefaultized;
+export declare function checkScaleErrors(verticalLayout: boolean, seriesId: SeriesId, xAxisKey: AxisId, xAxis: {
+    [axisKey: AxisId]: AxisDefaultized;
+}, yAxisKey: AxisId, yAxis: {
+    [axisKey: AxisId]: AxisDefaultized;
 }): void;

package/BarChart/types.d.ts

@@ -5,8 +5,8 @@ export type AnimationData = {
     y: number;
     width: number;
     height: number;
-    yOrigin: number;
-    xOrigin: number;
+    yOrigin?: number;
+    xOrigin?: number;
     layout: BarSeriesType['layout'];
 };
 export interface CompletedBarData extends AnimationData {

package/BarChart/useBarChartProps.d.ts

@@ -0,0 +1,34 @@
+import type { BarChartProps } from './BarChart';
+import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { BarPlotProps } from './BarPlot';
+import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
+import { ChartsGridProps } from '../ChartsGrid';
+import { ChartsClipPathProps } from '../ChartsClipPath';
+import { ChartsOverlayProps } from '../ChartsOverlay';
+import { ChartsAxisProps } from '../ChartsAxis';
+import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
+import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsTooltipProps } from '../ChartsTooltip';
+/**
+ * A helper function that extracts BarChartProps from the input props
+ * and returns an object with props for the children components of BarChart.
+ *
+ * @param props The input props for BarChart
+ * @returns An object with props for the children components of BarChart
+ */
+export declare const useBarChartProps: (props: BarChartProps) => {
+    chartContainerProps: ResponsiveChartContainerProps;
+    barPlotProps: BarPlotProps;
+    axisClickHandlerProps: ChartsOnAxisClickHandlerProps;
+    gridProps: ChartsGridProps;
+    clipPathProps: ChartsClipPathProps;
+    clipPathGroupProps: {
+        clipPath: string;
+    };
+    overlayProps: ChartsOverlayProps;
+    chartsAxisProps: ChartsAxisProps;
+    axisHighlightProps: ChartsAxisHighlightProps;
+    legendProps: ChartsLegendProps;
+    tooltipProps: ChartsTooltipProps;
+    children: import("react").ReactNode;
+};

package/BarChart/useBarChartProps.js

@@ -0,0 +1,143 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBarChartProps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _constants = require("../constants");
+/**
+ * A helper function that extracts BarChartProps from the input props
+ * and returns an object with props for the children components of BarChart.
+ *
+ * @param props The input props for BarChart
+ * @returns An object with props for the children components of BarChart
+ */
+const useBarChartProps = props => {
+  const {
+    xAxis,
+    yAxis,
+    series,
+    width,
+    height,
+    margin,
+    colors,
+    dataset,
+    sx,
+    tooltip,
+    onAxisClick,
+    axisHighlight,
+    legend,
+    grid,
+    topAxis,
+    leftAxis,
+    rightAxis,
+    bottomAxis,
+    children,
+    slots,
+    slotProps,
+    skipAnimation,
+    loading,
+    layout,
+    onItemClick,
+    highlightedItem,
+    onHighlightChange,
+    borderRadius,
+    barLabel
+  } = props;
+  const id = (0, _useId.default)();
+  const clipPathId = `${id}-clip-path`;
+  const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
+  const defaultAxisConfig = {
+    scaleType: 'band',
+    data: Array.from({
+      length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
+    }, (_, index) => index)
+  };
+  const chartContainerProps = {
+    series: series.map(s => (0, _extends2.default)({
+      type: 'bar'
+    }, s, {
+      layout: hasHorizontalSeries ? 'horizontal' : 'vertical'
+    })),
+    width,
+    height,
+    margin,
+    colors,
+    dataset,
+    xAxis: xAxis ?? (hasHorizontalSeries ? undefined : [(0, _extends2.default)({
+      id: _constants.DEFAULT_X_AXIS_KEY
+    }, defaultAxisConfig)]),
+    yAxis: yAxis ?? (hasHorizontalSeries ? [(0, _extends2.default)({
+      id: _constants.DEFAULT_Y_AXIS_KEY
+    }, defaultAxisConfig)] : undefined),
+    sx,
+    highlightedItem,
+    onHighlightChange,
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick
+  };
+  const barPlotProps = {
+    onItemClick,
+    slots,
+    slotProps,
+    skipAnimation,
+    borderRadius,
+    barLabel
+  };
+  const axisClickHandlerProps = {
+    onAxisClick
+  };
+  const gridProps = {
+    vertical: grid?.vertical,
+    horizontal: grid?.horizontal
+  };
+  const clipPathGroupProps = {
+    clipPath: `url(#${clipPathId})`
+  };
+  const clipPathProps = {
+    id: clipPathId
+  };
+  const overlayProps = {
+    slots,
+    slotProps,
+    loading
+  };
+  const chartsAxisProps = {
+    topAxis,
+    leftAxis,
+    rightAxis,
+    bottomAxis,
+    slots,
+    slotProps
+  };
+  const axisHighlightProps = (0, _extends2.default)({}, hasHorizontalSeries ? {
+    y: 'band'
+  } : {
+    x: 'band'
+  }, axisHighlight);
+  const legendProps = (0, _extends2.default)({}, legend, {
+    slots,
+    slotProps
+  });
+  const tooltipProps = (0, _extends2.default)({}, tooltip, {
+    slots,
+    slotProps
+  });
+  return {
+    chartContainerProps,
+    barPlotProps,
+    axisClickHandlerProps,
+    gridProps,
+    clipPathProps,
+    clipPathGroupProps,
+    overlayProps,
+    chartsAxisProps,
+    axisHighlightProps,
+    legendProps,
+    tooltipProps,
+    children
+  };
+};
+exports.useBarChartProps = useBarChartProps;

package/CHANGELOG.md

@@ -3,6 +3,187 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.8.0
+
+_Jun 28, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛰 Introduce server-side data source for improved server integration in the Data Grid.
+
+  Supports server-side pagination, sorting and filtering on plain and tree data, and automatic caching.
+
+  To enable, provide a `getRows` function to the `unstable_dataSource` prop on the Data Grid component.
+
+  ```tsx
+  const dataSource = {
+    getRows: async (params: GridServerGetRowsParams) => {
+      const data = await fetch(
+        `https://api.example.com/data?${new URLSearchParams({
+          page: params.page,
+          pageSize: params.pageSize,
+          sortModel: JSON.stringify(params.sortModel),
+          filterModel: JSON.stringify(params.filterModel),
+        }).toString()}`,
+      );
+      return {
+        rows: data.rows,
+        totalRows: data.totalRows,
+      };
+    },
+  }
+  <DataGridPro
+    unstable_dataSource={dataSource}
+    {...otherProps}
+  />
+  ```
+
+  See [server-side data documentation](https://mui.com/x/react-data-grid/server-side-data/) for more details.
+
+- 📈 Support Date data on the BarChart component
+- ↕️ Support custom column sort icons on the Data Grid
+- 🖱️ Support modifying the expansion trigger on the Tree View components
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.8.0`
+
+- [DataGrid] Add `columnHeaderSortIcon` slot (#13563) @arminmeh
+- [DataGrid] Fix dimensions lag issue after autosize (#13587) @MBilalShafi
+- [DataGrid] Fix print export failure when `hideFooter` option is set (#13034) @tarunrajput
+
+#### `@mui/x-data-grid-pro@7.8.0` [![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@7.8.0`, plus:
+
+- [DataGridPro] Fix multi-sorting indicator being cut off (#13625) @KenanYusuf
+- [DataGridPro] Server-side tree data support (#12317) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@7.8.0` [![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@7.8.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.8.0`
+
+- [fields] Fix section clearing behavior on Android (#13652) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.8.0` [![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@7.8.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.8.0`
+
+- [charts] Fix line chart props not passing correct event handlers (#13609) @JCQuintas
+- [charts] Support BarChart with `Date` data (#13471) @alexfauquette
+- [charts] Support RTL for y-axis (#13614) @alexfauquette
+- [charts] Use default values instead of non-null assertion to prevent error being thrown (#13637) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.8.0`
+
+- [TreeView] Add `expansionTrigger` prop (#13533) @noraleonte
+- [TreeView] Support experimental features from plugin's dependencies (#13632) @flaviendelangle
+
+### Docs
+
+- [docs] Add callout for `Luxon` `throwOnInvalid` support (#13621) @LukasTy
+- [docs] Add "Overlays" section to the Data Grid documentation (#13624) @KenanYusuf
+
+### Core
+
+- [core] Add eslint rule to restrict import from `../internals` root (#13633) @JCQuintas
+- [docs-infra] Sync `\_app` folder with monorepo (#13582) @Janpot
+- [license] Allow usage of charts and tree view pro package for old premium licenses (#13619) @flaviendelangle
+
+## 7.7.1
+
+_Jun 21, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Portuguese (pt-PT) locale on the Data Grid
+- 🌍 Improve Danish (da-DK) locale on the Date and Time Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.7.1`
+
+- [DataGrid][docs] Clarify enabling pagination (#13350) @oliviertassinari
+- [DataGrid] Fix CSV export escaping for non-string values (#13560) @joeycumines-scw
+- [l10n] Improve Portuguese (pt-PT) locale (#13348) @joaosreis
+
+#### `@mui/x-data-grid-pro@7.7.1` [![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@7.7.1`, plus:
+
+- [DataGrid] Warn about `getTreeDataPath` reference (#13519) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.7.1` [![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@7.7.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.7.1`
+
+- [fields] Prevent digit editing on the `Space` key down (#13510) @flaviendelangle
+- [l10n] Improve Danish (da-DK) locale (#13375) @jacrowland1
+- [pickers] Add context to `onAccept` callback (#13511) @flaviendelangle
+- [pickers] Always use the same timezone in the field, the view and the layout components (#13481) @flaviendelangle
+- [pickers] Fix `AdapterDateFnsV3` generated method types (#13464) @alexey-kozlenkov
+- [pickers] Fix controlled `view` behavior (#13552) @LukasTy
+- [TimePicker] Improves RTL verification for the time pickers default views (#13447) @arthurbalduini
+
+#### `@mui/x-date-pickers-pro@7.7.1` [![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@7.7.1`, plus:
+
+- [DateRangePicker] Add accessible name to calendar grid (#13538) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.7.1`
+
+- [charts] Divide `CartesianProvider` to use logic in Pro package (#13531) @JCQuintas
+- [charts] Do not publish the pro package (#13539) @alexfauquette
+- [charts] Export `Pro` versions of regular charts (#13547) @JCQuintas
+- [charts] Prepare `ChartContainerPro` for future Zoom changes (#13532) @JCQuintas
+- [charts] Remove unnecessary proptypes from internal component (#13518) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.7.1`
+
+- [TreeView] Improve typing to support optional dependencies in plugins and in the item (#13523) @flaviendelangle
+- [TreeView] Move `useTreeViewId` to the core plugins (#13566) @flaviendelangle
+- [TreeView] Remove unused state from `useTreeViewId` (#13579) @flaviendelangle
+- [TreeView] Support `itemId` with escaping characters when using `SimpleTreeView` (#13487) @oukunan
+
+### Docs
+
+- [docs] Add section about the new uncovered product watermark (#13568) @michelengelen
+- [docs] Document the `PickerValidDate` type override (#13476) @flaviendelangle
+- [docs] Fix typo (#13507) @anshtiwatne
+- [docs] Remove "-" in heat-map and tree-map urls (#13569) @alexfauquette
+- [docs] Use dedicated tab for weather dataset (#13513) @alexfauquette
+- [x-license] license update proposal (#13459) @michelengelen
+
+### Core
+
+- [core] Fix failing CI test (#13574) @alexfauquette
+- [infra] Remove explicit `@testing-library/react` dependency (#13478) @LukasTy
+
 ## 7.7.0
 
 _Jun 13, 2024_

package/ChartContainer/ChartContainer.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { DrawingProviderProps } from '../context/DrawingProvider';
 import { SeriesContextProviderProps } from '../context/SeriesContextProvider';
 import { ChartsSurfaceProps } from '../ChartsSurface';
-import { CartesianContextProviderProps } from '../context/CartesianContextProvider';
+import { CartesianContextProviderProps } from '../context/CartesianProvider';
 import { HighlightedProviderProps, ZAxisContextProviderProps } from '../context';
 import { ChartsPluginType } from '../models/plugin';
 import { ChartSeriesType } from '../models/seriesType/config';
@@ -20,6 +20,6 @@ declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartsSurface
      * An array of plugins defining how to preprocess data.
      * If not provided, the container supports line, bar, scatter and pie charts.
      */
-    plugins?: ChartsPluginType<keyof import("../models/seriesType/config").ChartsSeriesConfig>[] | undefined;
+    plugins?: ChartsPluginType<ChartSeriesType>[];
 } & React.RefAttributes<unknown>>;
 export { ChartContainer };

package/ChartContainer/ChartContainer.js

@@ -7,17 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartContainer = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _DrawingProvider = require("../context/DrawingProvider");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _ColorProvider = require("../context/ColorProvider");
-var _useReducedMotion = require("../hooks/useReducedMotion");
 var _ChartsSurface = require("../ChartsSurface");
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
 var _context = require("../context");
-var _usePluginsMerge = require("./usePluginsMerge");
+var _useChartContainerHooks = require("./useChartContainerHooks");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -41,16 +39,14 @@ const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(fu
     plugins,
     children
   } = props;
-  const svgRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(ref, svgRef);
   const {
+    svgRef,
+    handleRef,
     xExtremumGetters,
     yExtremumGetters,
     seriesFormatters,
     colorProcessors
-  } = (0, _usePluginsMerge.usePluginsMerge)(plugins);
-  (0, _useReducedMotion.useReducedMotion)(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
-
+  } = (0, _useChartContainerHooks.useChartContainerHooks)(ref, plugins);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingProvider.DrawingProvider, {
     width: width,
     height: height,
@@ -63,7 +59,7 @@ const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(fu
         colors: colors,
         dataset: dataset,
         seriesFormatters: seriesFormatters,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianContextProvider.CartesianContextProvider, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProvider.CartesianContextProvider, {
           xAxis: xAxis,
           yAxis: yAxis,
           dataset: dataset,

package/ChartContainer/useChartContainerHooks.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ChartsPluginType } from '../models';
+import { ChartSeriesType } from '../models/seriesType/config';
+export declare const useChartContainerHooks: (ref: React.ForwardedRef<unknown> | null, plugins?: ChartsPluginType<ChartSeriesType>[]) => {
+    svgRef: React.RefObject<SVGSVGElement>;
+    handleRef: ((instance: unknown) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null;
+    xExtremumGetters: import("../models").ExtremumGettersConfig<keyof import("../models/seriesType/config").ChartsSeriesConfig>;
+    yExtremumGetters: import("../models").ExtremumGettersConfig<keyof import("../models/seriesType/config").ChartsSeriesConfig>;
+    seriesFormatters: import("../internals").SeriesFormatterConfig<keyof import("../models/seriesType/config").ChartsSeriesConfig>;
+    colorProcessors: import("../models").ColorProcessorsConfig<keyof import("../models/seriesType/config").ChartsSeriesConfig>;
+};

package/ChartContainer/useChartContainerHooks.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartContainerHooks = void 0;
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var React = _interopRequireWildcard(require("react"));
+var _usePluginsMerge = require("./usePluginsMerge");
+var _useReducedMotion = require("../hooks/useReducedMotion");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useChartContainerHooks = (ref, plugins) => {
+  const svgRef = React.useRef(null);
+  const handleRef = (0, _useForkRef.default)(ref, svgRef);
+  const {
+    xExtremumGetters,
+    yExtremumGetters,
+    seriesFormatters,
+    colorProcessors
+  } = (0, _usePluginsMerge.usePluginsMerge)(plugins);
+  (0, _useReducedMotion.useReducedMotion)(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
+
+  return {
+    svgRef,
+    handleRef,
+    xExtremumGetters,
+    yExtremumGetters,
+    seriesFormatters,
+    colorProcessors
+  };
+};
+exports.useChartContainerHooks = useChartContainerHooks;

package/ChartContainer/usePluginsMerge.d.ts

@@ -1,6 +1,5 @@
-import { ChartsPluginType, ColorProcessorsConfig } from '../models';
+import { ChartsPluginType, ColorProcessorsConfig, ExtremumGettersConfig } from '../models';
 import { ChartSeriesType } from '../models/seriesType/config';
-import { ExtremumGettersConfig } from '../context/CartesianContextProvider';
 import { SeriesFormatterConfig } from '../context/SeriesContextProvider';
 export declare function usePluginsMerge<T extends ChartSeriesType>(plugins?: ChartsPluginType<T>[]): {
     seriesFormatters: SeriesFormatterConfig<keyof import("../models/seriesType/config").ChartsSeriesConfig>;

package/ChartsAxis/ChartsAxis.js

@@ -8,7 +8,7 @@ exports.ChartsAxis = ChartsAxis;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _ChartsXAxis = require("../ChartsXAxis");
 var _ChartsYAxis = require("../ChartsYAxis");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -56,7 +56,7 @@ function ChartsAxis(props) {
     xAxisIds,
     yAxis,
     yAxisIds
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
 
   // TODO: use for plotting line without ticks or any thing
   // const drawingArea = React.useContext(DrawingContext);

package/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -15,7 +15,7 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _styles = require("@mui/material/styles");
 var _InteractionProvider = require("../context/InteractionProvider");
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _useScale = require("../hooks/useScale");
 var _isBandScale = require("../internals/isBandScale");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -66,7 +66,7 @@ function ChartsAxisHighlight(props) {
     xAxis,
     yAxisIds,
     yAxis
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   const classes = useUtilityClasses();
   const USED_X_AXIS_ID = xAxisIds[0];
   const USED_Y_AXIS_ID = yAxisIds[0];
@@ -77,15 +77,30 @@ function ChartsAxisHighlight(props) {
   } = React.useContext(_InteractionProvider.InteractionContext);
   const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
   const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
+  const axisX = axis.x;
+  const axisY = axis.y;
+  const isBandScaleX = xAxisHighlight === 'band' && axisX !== null && (0, _isBandScale.isBandScale)(xScale);
+  const isBandScaleY = yAxisHighlight === 'band' && axisY !== null && (0, _isBandScale.isBandScale)(yScale);
+  if (process.env.NODE_ENV !== 'production') {
+    const isXError = isBandScaleX && xScale(axisX.value) === undefined;
+    const isYError = isBandScaleY && yScale(axisY.value) === undefined;
+    if (isXError || isYError) {
+      console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
+    }
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [xAxisHighlight === 'band' && axis.x !== null && (0, _isBandScale.isBandScale)(xScale) && /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsAxisHighlightPath, {
-      d: `M ${xScale(axis.x.value) - (xScale.step() - xScale.bandwidth()) / 2} ${yScale.range()[0]} l ${xScale.step()} 0 l 0 ${yScale.range()[1] - yScale.range()[0]} l ${-xScale.step()} 0 Z`,
+    children: [isBandScaleX && xScale(axisX.value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsAxisHighlightPath
+    // @ts-expect-error, xScale value is checked in the statement above
+    , {
+      d: `M ${xScale(axisX.value) - (xScale.step() - xScale.bandwidth()) / 2} ${yScale.range()[0]} l ${xScale.step()} 0 l 0 ${yScale.range()[1] - yScale.range()[0]} l ${-xScale.step()} 0 Z`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'band'
       }
-    }), yAxisHighlight === 'band' && axis.y !== null && (0, _isBandScale.isBandScale)(yScale) && /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsAxisHighlightPath, {
-      d: `M ${xScale.range()[0]} ${yScale(axis.y.value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${xScale.range()[1] - xScale.range()[0]} 0 l 0 ${-yScale.step()} Z`,
+    }), isBandScaleY && yScale(axisY.value) === undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsAxisHighlightPath, {
+      d: `M ${xScale.range()[0]} ${
+      // @ts-expect-error, yScale value is checked in the statement above
+      yScale(axisY.value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${xScale.range()[1] - xScale.range()[0]} 0 l 0 ${-yScale.step()} Z`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'band'