@mui/x-charts 7.8.0 → 7.9.0

package/BarChart/BarChart.d.ts

@@ -11,9 +11,9 @@ import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
 import { ChartsGridProps } from '../ChartsGrid';
 import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay/ChartsOverlay';
-export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots {
+export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsTooltipSlots<'bar'>, ChartsOverlaySlots {
 }
-export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps {
+export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps<'bar'>, ChartsOverlaySlotProps {
 }
 export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
     /**
@@ -25,7 +25,7 @@ export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'seri
      * The configuration of the tooltip.
      * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
      */
-    tooltip?: ChartsTooltipProps;
+    tooltip?: ChartsTooltipProps<'bar'>;
     /**
      * Option to display a cartesian grid in the background.
      */

package/BarChart/useBarChartProps.d.ts

@@ -29,6 +29,6 @@ export declare const useBarChartProps: (props: BarChartProps) => {
     chartsAxisProps: ChartsAxisProps;
     axisHighlightProps: ChartsAxisHighlightProps;
     legendProps: ChartsLegendProps;
-    tooltipProps: ChartsTooltipProps;
+    tooltipProps: ChartsTooltipProps<"bar">;
     children: import("react").ReactNode;
 };

package/CHANGELOG.md

@@ -3,6 +3,72 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.9.0
+
+_Jul 5, 2024_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔄 Add loading overlay variants, including a skeleton loader option to the Data Grid component. See [Loading overlay docs](https://mui.com/x/react-data-grid/overlays/#loading-overlay) for more details.
+- 🌳 Add `selectItem` and `getItemDOMElement` methods to the TreeView component public API
+- ⛏️ Make the `usePickersTranslations` hook public in the pickers component
+- 🐞 Bugfixes
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.9.0`
+
+- [DataGrid] Add skeleton loading overlay support (#13293) @KenanYusuf
+- [DataGrid] Fix pagination when `pagination={undefined}` (#13349) @sai6855
+
+#### `@mui/x-data-grid-pro@7.9.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.9.0`.
+
+#### `@mui/x-data-grid-premium@7.9.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.9.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.9.0`
+
+- [pickers] Make the `usePickersTranslations` hook public (#13657) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.9.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.9.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.9.0`
+
+- [charts] Add Heatmap (unreleased) (#13209) @alexfauquette
+- [charts] Add initial `Zoom&Pan` to the Pro charts (unreleased) (#13405) @JCQuintas
+- [charts] Fix Axis Highlight on horizontal bar charts regression (#13717) @JCQuintas
+- [charts] Improve charts interaction for mobile users (#13692) @JCQuintas
+- [charts] Add documentation on how to disable the tooltip on charts (#13724) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.9.0`
+
+- [TreeView] Add `selectItem` and `getItemDOMElement` methods to the public API (#13485) @flaviendelangle
+
+### Docs
+
+- [docs] Fix custom "no results overlay" demo in dark mode (#13715) @KenanYusuf
+
+### Core
+
+- [core] Add `react_next` workflow in CircleCI (#13360) @cherniavskii
+- [core] Create a new package to share utils across X packages (#13528) @flaviendelangle
+- [core] Fix dependency setup (#13684) @LukasTy
+- [core] Remove `jscodeshift-add-imports` package (#13720) @LukasTy
+- [code-infra] Cleanup monorepo and `@mui/docs` usage (#13713) @LukasTy
+
 ## 7.8.0
 
 _Jun 28, 2024_

package/ChartContainer/ChartContainer.js

@@ -292,6 +292,8 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
-    id: _propTypes.default.string
+    id: _propTypes.default.string,
+    max: _propTypes.default.number,
+    min: _propTypes.default.number
   }))
 } : void 0;

package/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -97,7 +97,7 @@ function ChartsAxisHighlight(props) {
       ownerState: {
         axisHighlight: 'band'
       }
-    }), isBandScaleY && yScale(axisY.value) === undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsAxisHighlightPath, {
+    }), 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`,

package/ChartsSurface.js

@@ -18,7 +18,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const ChartChartsSurfaceStyles = (0, _styles.styled)('svg', {
   name: 'MuiChartsSurface',
   slot: 'Root'
-})(() => ({}));
+})(() => ({
+  // This prevents default touch actions when using the svg on mobile devices.
+  // For example, prevent page scroll & zoom.
+  touchAction: 'none'
+}));
 const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props, ref) {
   const {
       children,

package/ChartsTooltip/ChartsAxisTooltipContent.d.ts

@@ -34,6 +34,9 @@ export type ChartsAxisContentProps = {
     classes: ChartsTooltipClasses;
     sx?: SxProps<Theme>;
 };
+/**
+ * @ignore - internal component.
+ */
 declare function ChartsAxisTooltipContent(props: {
     axisData: AxisInteractionData;
     content?: React.ElementType<ChartsAxisContentProps>;
@@ -41,7 +44,4 @@ declare function ChartsAxisTooltipContent(props: {
     sx?: SxProps<Theme>;
     classes: ChartsAxisContentProps['classes'];
 }): React.JSX.Element;
-declare namespace ChartsAxisTooltipContent {
-    var propTypes: any;
-}
 export { ChartsAxisTooltipContent };

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsAxisTooltipContent = ChartsAxisTooltipContent;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/base/utils");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _DefaultChartsAxisTooltipContent = require("./DefaultChartsAxisTooltipContent");
@@ -18,6 +17,9 @@ var _useSeries = require("../hooks/useSeries");
 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; }
+/**
+ * @ignore - internal component.
+ */
 function ChartsAxisTooltipContent(props) {
   const {
     content,
@@ -79,41 +81,4 @@ function ChartsAxisTooltipContent(props) {
     ownerState: {}
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, (0, _extends2.default)({}, chartTooltipContentProps));
-}
-process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  axisData: _propTypes.default.shape({
-    x: _propTypes.default.shape({
-      index: _propTypes.default.number,
-      value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired
-    }),
-    y: _propTypes.default.shape({
-      index: _propTypes.default.number,
-      value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired
-    })
-  }).isRequired,
-  classes: _propTypes.default.object.isRequired,
-  content: _propTypes.default.elementType,
-  contentProps: _propTypes.default.shape({
-    axis: _propTypes.default.object,
-    axisData: _propTypes.default.shape({
-      x: _propTypes.default.shape({
-        index: _propTypes.default.number,
-        value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired
-      }),
-      y: _propTypes.default.shape({
-        index: _propTypes.default.number,
-        value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired
-      })
-    }),
-    axisValue: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]),
-    classes: _propTypes.default.object,
-    dataIndex: _propTypes.default.number,
-    series: _propTypes.default.arrayOf(_propTypes.default.object),
-    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
-  }),
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
-} : void 0;
+}

package/ChartsTooltip/ChartsItemTooltipContent.d.ts

@@ -3,7 +3,7 @@ import { SxProps, Theme } from '@mui/material/styles';
 import { ItemInteractionData } from '../context/InteractionProvider';
 import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config';
 import { ChartsTooltipClasses } from './chartsTooltipClasses';
-export type ChartsItemContentProps<T extends ChartSeriesType = ChartSeriesType> = {
+export interface ChartsItemContentProps<T extends ChartSeriesType> {
     /**
      * The data used to identify the triggered item.
      */
@@ -23,15 +23,16 @@ export type ChartsItemContentProps<T extends ChartSeriesType = ChartSeriesType>
      */
     getColor: (dataIndex: number) => string;
     sx?: SxProps<Theme>;
-};
-declare function ChartsItemTooltipContent<T extends ChartSeriesType>(props: {
+}
+export interface ChartsItemTooltipContentProps<T extends ChartSeriesType> {
     itemData: ItemInteractionData<T>;
     content?: React.ElementType<ChartsItemContentProps<T>>;
     contentProps?: Partial<ChartsItemContentProps<T>>;
     sx?: SxProps<Theme>;
     classes: ChartsItemContentProps<T>['classes'];
-}): React.JSX.Element;
-declare namespace ChartsItemTooltipContent {
-    var propTypes: any;
 }
+/**
+ * @ignore - internal component.
+ */
+declare function ChartsItemTooltipContent<T extends ChartSeriesType>(props: ChartsItemTooltipContentProps<T>): React.JSX.Element;
 export { ChartsItemTooltipContent };

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsItemTooltipContent = ChartsItemTooltipContent;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/base/utils");
 var _DefaultChartsItemTooltipContent = require("./DefaultChartsItemTooltipContent");
 var _CartesianProvider = require("../context/CartesianProvider");
@@ -17,6 +16,9 @@ var _useSeries = require("../hooks/useSeries");
 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; }
+/**
+ * @ignore - internal component.
+ */
 function ChartsItemTooltipContent(props) {
   const {
     content,
@@ -55,29 +57,4 @@ function ChartsItemTooltipContent(props) {
     ownerState: {}
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, (0, _extends2.default)({}, chartTooltipContentProps));
-}
-process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  classes: _propTypes.default.object.isRequired,
-  content: _propTypes.default.elementType,
-  contentProps: _propTypes.default.shape({
-    classes: _propTypes.default.object,
-    getColor: _propTypes.default.func,
-    itemData: _propTypes.default.shape({
-      dataIndex: _propTypes.default.number,
-      seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-      type: _propTypes.default.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
-    }),
-    series: _propTypes.default.object,
-    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
-  }),
-  itemData: _propTypes.default.shape({
-    dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
-  }).isRequired,
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
-} : void 0;
+}

package/ChartsTooltip/ChartsTooltip.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 import { PopperProps as BasePopperProps } from '@mui/base/Popper';
 import { TriggerOptions } from './utils';
+import { ChartSeriesType } from '../models/seriesType/config';
 import { ChartsItemContentProps } from './ChartsItemTooltipContent';
 import { ChartsAxisContentProps } from './ChartsAxisTooltipContent';
 import { ChartsTooltipClasses } from './chartsTooltipClasses';
@@ -11,7 +12,7 @@ export type PopperProps = BasePopperProps & {
      */
     sx?: SxProps<Theme>;
 };
-export interface ChartsTooltipSlots {
+export interface ChartsTooltipSlots<T extends ChartSeriesType> {
     /**
      * Custom component for the tooltip popper.
      * @default ChartsTooltipRoot
@@ -26,14 +27,14 @@ export interface ChartsTooltipSlots {
      * Custom component for displaying tooltip content when triggered by item event.
      * @default DefaultChartsItemTooltipContent
      */
-    itemContent?: React.ElementType<ChartsItemContentProps>;
+    itemContent?: React.ElementType<ChartsItemContentProps<T>>;
 }
-export interface ChartsTooltipSlotProps {
+export interface ChartsTooltipSlotProps<T extends ChartSeriesType> {
     popper?: Partial<PopperProps>;
     axisContent?: Partial<ChartsAxisContentProps>;
-    itemContent?: Partial<ChartsItemContentProps>;
+    itemContent?: Partial<ChartsItemContentProps<T>>;
 }
-export type ChartsTooltipProps = {
+export interface ChartsTooltipProps<T extends ChartSeriesType> {
     /**
      * Select the kind of tooltip to display
      * - 'item': Shows data about the item below the mouse.
@@ -60,13 +61,13 @@ export type ChartsTooltipProps = {
      * Overridable component slots.
      * @default {}
      */
-    slots?: ChartsTooltipSlots;
+    slots?: ChartsTooltipSlots<T>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: ChartsTooltipSlotProps;
-};
+    slotProps?: ChartsTooltipSlotProps<T>;
+}
 /**
  * Demos:
  *
@@ -76,7 +77,7 @@ export type ChartsTooltipProps = {
  *
  * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
  */
-declare function ChartsTooltip(props: ChartsTooltipProps): React.JSX.Element | null;
+declare function ChartsTooltip<T extends ChartSeriesType>(props: ChartsTooltipProps<T>): React.JSX.Element | null;
 declare namespace ChartsTooltip {
     var propTypes: any;
 }

package/ChartsTooltip/ChartsTooltip.js

@@ -86,8 +86,14 @@ function ChartsTooltip(props) {
     externalSlotProps: slotProps?.popper,
     additionalProps: {
       open: popperOpen,
-      placement: 'right-start',
-      anchorEl: (0, _utils2.generateVirtualElement)(mousePosition)
+      placement: mousePosition?.pointerType === 'mouse' ? 'right-start' : 'top',
+      anchorEl: (0, _utils2.generateVirtualElement)(mousePosition),
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [0, mousePosition?.pointerType === 'touch' ? 40 - mousePosition.height : 0]
+        }
+      }]
     },
     ownerState: {}
   });

package/ChartsTooltip/ChartsTooltipTable.d.ts

@@ -1,7 +1,22 @@
+/**
+ * @ignore - internal component.
+ */
 export declare const ChartsTooltipPaper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * @ignore - internal component.
+ */
 export declare const ChartsTooltipTable: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, keyof import("react").ClassAttributes<HTMLTableElement> | keyof import("react").TableHTMLAttributes<HTMLTableElement>>, {}>;
+/**
+ * @ignore - internal component.
+ */
 export declare const ChartsTooltipRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, keyof import("react").ClassAttributes<HTMLTableRowElement> | keyof import("react").HTMLAttributes<HTMLTableRowElement>>, {}>;
+/**
+ * @ignore - internal component.
+ */
 export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, keyof import("react").ClassAttributes<HTMLTableDataCellElement> | keyof import("react").TdHTMLAttributes<HTMLTableDataCellElement>>, {}>;
+/**
+ * @ignore - internal component.
+ */
 export declare const ChartsTooltipMark: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     color: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/ChartsTooltip/ChartsTooltipTable.js

@@ -7,6 +7,9 @@ exports.ChartsTooltipTable = exports.ChartsTooltipRow = exports.ChartsTooltipPap
 var _styles = require("@mui/material/styles");
 var _system = require("@mui/system");
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
+/**
+ * @ignore - internal component.
+ */
 const ChartsTooltipPaper = exports.ChartsTooltipPaper = (0, _styles.styled)('div', {
   name: 'MuiChartsTooltip',
   slot: 'Container'
@@ -19,6 +22,10 @@ const ChartsTooltipPaper = exports.ChartsTooltipPaper = (0, _styles.styled)('div
   transition: theme.transitions.create('box-shadow'),
   borderRadius: theme.shape.borderRadius
 }));
+
+/**
+ * @ignore - internal component.
+ */
 const ChartsTooltipTable = exports.ChartsTooltipTable = (0, _styles.styled)('table', {
   name: 'MuiChartsTooltip',
   slot: 'Table'
@@ -30,6 +37,10 @@ const ChartsTooltipTable = exports.ChartsTooltipTable = (0, _styles.styled)('tab
     borderBottom: `solid ${(theme.vars || theme).palette.divider} 1px`
   }
 }));
+
+/**
+ * @ignore - internal component.
+ */
 const ChartsTooltipRow = exports.ChartsTooltipRow = (0, _styles.styled)('tr', {
   name: 'MuiChartsTooltip',
   slot: 'Row'
@@ -43,6 +54,10 @@ const ChartsTooltipRow = exports.ChartsTooltipRow = (0, _styles.styled)('tr', {
     paddingBottom: theme.spacing(1)
   }
 }));
+
+/**
+ * @ignore - internal component.
+ */
 const ChartsTooltipCell = exports.ChartsTooltipCell = (0, _styles.styled)('td', {
   name: 'MuiChartsTooltip',
   slot: 'Cell'
@@ -65,6 +80,10 @@ const ChartsTooltipCell = exports.ChartsTooltipCell = (0, _styles.styled)('td',
     paddingRight: theme.spacing(2)
   }
 }));
+
+/**
+ * @ignore - internal component.
+ */
 const ChartsTooltipMark = exports.ChartsTooltipMark = (0, _styles.styled)('div', {
   name: 'MuiChartsTooltip',
   slot: 'Mark',

package/ChartsTooltip/index.d.ts

@@ -4,3 +4,4 @@ export * from './ChartsAxisTooltipContent';
 export * from './ChartsItemTooltipContent';
 export * from './DefaultChartsAxisTooltipContent';
 export * from './DefaultChartsItemTooltipContent';
+export * from './ChartsTooltipTable';

package/ChartsTooltip/index.js

@@ -68,4 +68,15 @@ Object.keys(_DefaultChartsItemTooltipContent).forEach(function (key) {
       return _DefaultChartsItemTooltipContent[key];
     }
   });
+});
+var _ChartsTooltipTable = require("./ChartsTooltipTable");
+Object.keys(_ChartsTooltipTable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsTooltipTable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsTooltipTable[key];
+    }
+  });
 });

package/ChartsTooltip/utils.d.ts

@@ -1,9 +1,12 @@
 import { AxisInteractionData, ItemInteractionData } from '../context/InteractionProvider';
 import { ChartSeriesType } from '../models/seriesType/config';
-export declare function generateVirtualElement(mousePosition: {
+type MousePosition = {
     x: number;
     y: number;
-} | null): {
+    pointerType: 'mouse' | 'touch' | 'pen';
+    height: number;
+};
+export declare function generateVirtualElement(mousePosition: MousePosition | null): {
     getBoundingClientRect: () => {
         width: number;
         height: number;
@@ -16,10 +19,8 @@ export declare function generateVirtualElement(mousePosition: {
         toJSON: () => string;
     };
 };
-export declare function useMouseTracker(): {
-    x: number;
-    y: number;
-} | null;
+export declare function useMouseTracker(): MousePosition | null;
 export type TriggerOptions = 'item' | 'axis' | 'none';
 export declare function getTooltipHasData(trigger: TriggerOptions, displayedData: null | AxisInteractionData | ItemInteractionData<ChartSeriesType>): boolean;
 export declare function utcFormatter(v: string | number | Date): string;
+export {};

package/ChartsTooltip/utils.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,6 +8,7 @@ exports.generateVirtualElement = generateVirtualElement;
 exports.getTooltipHasData = getTooltipHasData;
 exports.useMouseTracker = useMouseTracker;
 exports.utcFormatter = utcFormatter;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _hooks = require("../hooks");
 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); }
@@ -31,26 +33,19 @@ function generateVirtualElement(mousePosition) {
     x,
     y
   } = mousePosition;
+  const boundingBox = {
+    width: 0,
+    height: 0,
+    x,
+    y,
+    top: y,
+    right: x,
+    bottom: y,
+    left: x
+  };
   return {
-    getBoundingClientRect: () => ({
-      width: 0,
-      height: 0,
-      x,
-      y,
-      top: y,
-      right: x,
-      bottom: y,
-      left: x,
-      toJSON: () => JSON.stringify({
-        width: 0,
-        height: 0,
-        x,
-        y,
-        top: y,
-        right: x,
-        bottom: y,
-        left: x
-      })
+    getBoundingClientRect: () => (0, _extends2.default)({}, boundingBox, {
+      toJSON: () => JSON.stringify(boundingBox)
     })
   };
 }
@@ -68,21 +63,20 @@ function useMouseTracker() {
       setMousePosition(null);
     };
     const handleMove = event => {
-      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
       setMousePosition({
-        x: target.clientX,
-        y: target.clientY
+        x: event.clientX,
+        y: event.clientY,
+        height: event.height,
+        pointerType: event.pointerType
       });
     };
-    element.addEventListener('mouseout', handleOut);
-    element.addEventListener('mousemove', handleMove);
-    element.addEventListener('touchend', handleOut);
-    element.addEventListener('touchmove', handleMove);
+    element.addEventListener('pointerdown', handleMove);
+    element.addEventListener('pointermove', handleMove);
+    element.addEventListener('pointerup', handleOut);
     return () => {
-      element.removeEventListener('mouseout', handleOut);
-      element.removeEventListener('mousemove', handleMove);
-      element.addEventListener('touchend', handleOut);
-      element.addEventListener('touchmove', handleMove);
+      element.removeEventListener('pointerdown', handleMove);
+      element.removeEventListener('pointermove', handleMove);
+      element.removeEventListener('pointerup', handleOut);
     };
   }, [svgRef]);
   return mousePosition;

package/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -105,7 +105,7 @@ function ChartsVoronoiHandler(props) {
     // TODO: A perf optimisation of voronoi could be to use the last point as the initial point for the next search.
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
-      const svgPoint = (0, _getSVGPoint.getSVGPoint)(svgRef.current, event);
+      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
       const outsideX = svgPoint.x < left || svgPoint.x > left + width;
       const outsideY = svgPoint.y < top || svgPoint.y > top + height;
       if (outsideX || outsideY) {
@@ -200,12 +200,12 @@ function ChartsVoronoiHandler(props) {
         dataIndex
       });
     };
-    element.addEventListener('mouseout', handleMouseOut);
-    element.addEventListener('mousemove', handleMouseMove);
+    element.addEventListener('pointerout', handleMouseOut);
+    element.addEventListener('pointermove', handleMouseMove);
     element.addEventListener('click', handleMouseClick);
     return () => {
-      element.removeEventListener('mouseout', handleMouseOut);
-      element.removeEventListener('mousemove', handleMouseMove);
+      element.removeEventListener('pointerout', handleMouseOut);
+      element.removeEventListener('pointermove', handleMouseMove);
       element.removeEventListener('click', handleMouseClick);
     };
   }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted]);

package/ChartsXAxis/ChartsXAxis.js

@@ -218,10 +218,10 @@ function ChartsXAxis(inProps) {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,
     children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
-      x1: xScale.range()[0],
-      x2: xScale.range()[1],
+      x1: left,
+      x2: left + width,
       className: classes.line
-    }, slotProps?.axisLine)), xTicksWithDimension.map(({
+    }, slotProps?.axisLine)), xTicksWithDimension.filter(tick => tick.offset >= left - 1 && tick.offset <= left + width + 1).map(({
       formattedValue,
       offset,
       labelOffset,
@@ -229,13 +229,15 @@ function ChartsXAxis(inProps) {
     }, index) => {
       const xTickLabel = labelOffset ?? 0;
       const yTickLabel = positionSign * (tickSize + 3);
+      const showTick = offset >= left - 1 && offset <= left + width + 1;
+      const showTickLabel = offset + xTickLabel >= left - 1 && offset + xTickLabel <= left + width + 1;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
         transform: `translate(${offset}, 0)`,
         className: classes.tickContainer,
-        children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
+        children: [!disableTicks && showTick && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
           y2: positionSign * tickSize,
           className: classes.tick
-        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
+        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && showTickLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
           x: xTickLabel,
           y: yTickLabel
         }, axisTickLabelProps, {