@mui/x-charts 7.7.1 → 7.9.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/useBarChartProps.d.ts

@@ -1,5 +1,14 @@
-/// <reference types="react" />
 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.
@@ -8,95 +17,18 @@ import type { BarChartProps } from './BarChart';
  * @returns An object with props for the children components of BarChart
  */
 export declare const useBarChartProps: (props: BarChartProps) => {
-    chartContainerProps: {
-        series: {
-            layout: "horizontal" | "vertical";
-            color?: string | undefined;
-            data?: (number | null)[] | undefined;
-            label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-            id?: import("../internals").SeriesId | undefined;
-            dataKey?: string | undefined;
-            stackOffset?: import("..").StackOffsetType | undefined;
-            valueFormatter?: import("../internals").SeriesValueFormatter<number | null> | undefined;
-            highlightScope?: Partial<import("..").HighlightScope> | undefined;
-            xAxisKey?: string | undefined;
-            yAxisKey?: string | undefined;
-            stack?: string | undefined;
-            stackOrder?: import("..").StackOrderType | undefined;
-            type: "bar";
-        }[];
-        width: number | undefined;
-        height: number | undefined;
-        margin: Partial<import("..").CardinalDirections<number>> | undefined;
-        colors: import("..").ChartsColorPalette | undefined;
-        dataset: import("../internals").DatasetType | undefined;
-        xAxis: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsXAxisProps>, "id">[] | undefined;
-        yAxis: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsYAxisProps>, "id">[] | undefined;
-        sx: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
-        highlightedItem: import("..").HighlightItemData | null | undefined;
-        onHighlightChange: ((highlightedItem: import("..").HighlightItemData | null) => void) | undefined;
-        disableAxisListener: boolean;
-    };
-    barPlotProps: {
-        onItemClick: ((event: import("react").MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: import("..").BarItemIdentifier) => void) | undefined;
-        slots: import("./BarChart").BarChartSlots | undefined;
-        slotProps: import("./BarChart").BarChartSlotProps | undefined;
-        skipAnimation: boolean | undefined;
-        borderRadius: number | undefined;
-        barLabel: "value" | ((item: import("./BarLabel").BarItem, context: import("./BarLabel").BarLabelContext) => string | null | undefined) | undefined;
-    };
-    axisClickHandlerProps: {
-        onAxisClick: ((event: MouseEvent, data: {
-            dataIndex: number;
-            axisValue?: string | number | Date | undefined;
-            seriesValues: Record<string, number | null | undefined>;
-        } | null) => void) | undefined;
-    };
-    gridProps: {
-        vertical: boolean | undefined;
-        horizontal: boolean | undefined;
-    };
-    clipPathProps: {
-        id: string;
-    };
+    chartContainerProps: ResponsiveChartContainerProps;
+    barPlotProps: BarPlotProps;
+    axisClickHandlerProps: ChartsOnAxisClickHandlerProps;
+    gridProps: ChartsGridProps;
+    clipPathProps: ChartsClipPathProps;
     clipPathGroupProps: {
         clipPath: string;
     };
-    overlayProps: {
-        slots: import("./BarChart").BarChartSlots | undefined;
-        slotProps: import("./BarChart").BarChartSlotProps | undefined;
-        loading: boolean | undefined;
-    };
-    chartsAxisProps: {
-        topAxis: string | import("..").ChartsXAxisProps | null | undefined;
-        leftAxis: string | import("..").ChartsYAxisProps | null | undefined;
-        rightAxis: string | import("..").ChartsYAxisProps | null | undefined;
-        bottomAxis: string | import("..").ChartsXAxisProps | null | undefined;
-        slots: import("./BarChart").BarChartSlots | undefined;
-        slotProps: import("./BarChart").BarChartSlotProps | undefined;
-    };
-    axisHighlightProps: {
-        x?: ("none" | "line" | "band") | undefined;
-        y: "none" | "line" | "band";
-    } | {
-        x: "none" | "line" | "band";
-        y?: ("none" | "line" | "band") | undefined;
-    };
-    legendProps: {
-        slots: import("./BarChart").BarChartSlots | undefined;
-        slotProps: import("./BarChart").BarChartSlotProps | undefined;
-        position?: import("..").AnchorPosition | undefined;
-        classes?: Partial<import("..").ChartsLegendClasses> | undefined;
-        hidden?: boolean | undefined;
-        direction?: import("..").Direction | undefined;
-    };
-    tooltipProps: {
-        slots: import("./BarChart").BarChartSlots | undefined;
-        slotProps: import("./BarChart").BarChartSlotProps | undefined;
-        trigger?: import("../ChartsTooltip/utils").TriggerOptions | undefined;
-        itemContent?: import("react").ElementType<import("..").ChartsItemContentProps<any>, keyof import("react").JSX.IntrinsicElements> | undefined;
-        axisContent?: import("react").ElementType<import("..").ChartsAxisContentProps, keyof import("react").JSX.IntrinsicElements> | undefined;
-        classes?: Partial<import("..").ChartsTooltipClasses> | undefined;
-    };
+    overlayProps: ChartsOverlayProps;
+    chartsAxisProps: ChartsAxisProps;
+    axisHighlightProps: ChartsAxisHighlightProps;
+    legendProps: ChartsLegendProps;
+    tooltipProps: ChartsTooltipProps<"bar">;
     children: import("react").ReactNode;
 };

package/CHANGELOG.md

@@ -3,6 +3,171 @@
 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_
+
+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_
@@ -44,7 +209,7 @@ Same changes as in `@mui/x-data-grid-pro@7.7.1`.
 - [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
+- [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')
 

package/ChartContainer/ChartContainer.d.ts

@@ -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

@@ -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/ChartContainer/useChartContainerHooks.d.ts

@@ -3,7 +3,7 @@ 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) | null;
+    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>;

package/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -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'

package/ChartsReferenceLine/common.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ChartsReferenceLineClasses } from './chartsReferenceLineClasses';
 import { ChartsTextStyle } from '../ChartsText';
 import { AxisId } from '../models/axis';

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: {}
   });