@mui/x-charts 7.6.2 → 7.7.1

package/BarChart/BarChart.d.ts

@@ -15,7 +15,7 @@ export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLege
 }
 export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps {
 }
-export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'plugins'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
+export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
     /**
      * The series to display in the bar chart.
      * An array of [[BarSeriesType]] objects.

package/BarChart/BarChart.js

@@ -7,12 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.BarChart = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _BarPlot = require("./BarPlot");
 var _ResponsiveChartContainer = require("../ResponsiveChartContainer");
 var _ChartsAxis = require("../ChartsAxis");
-var _constants = require("../constants");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
@@ -20,6 +18,7 @@ var _ChartsClipPath = require("../ChartsClipPath");
 var _ChartsGrid = require("../ChartsGrid");
 var _ChartsOnAxisClickHandler = require("../ChartsOnAxisClickHandler");
 var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
+var _useBarChartProps = require("./useBarChartProps");
 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; }
@@ -36,108 +35,26 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
   const {
-    xAxis,
-    yAxis,
-    series,
-    width,
-    height,
-    margin,
-    colors,
-    dataset,
-    sx,
-    layout,
-    tooltip,
-    axisHighlight,
-    legend,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    skipAnimation,
-    borderRadius,
-    onItemClick,
-    onAxisClick,
-    children,
-    slots,
-    slotProps,
-    loading,
-    barLabel,
-    highlightedItem,
-    onHighlightChange
-  } = 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 defaultizedAxisHighlight = (0, _extends2.default)({}, hasHorizontalSeries ? {
-    y: 'band'
-  } : {
-    x: 'band'
-  }, axisHighlight);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
-    ref: ref,
-    series: series.map(s => (0, _extends2.default)({
-      type: 'bar'
-    }, s, {
-      layout: hasHorizontalSeries ? 'horizontal' : 'vertical'
-    })),
-    width: width,
-    height: height,
-    margin: margin,
-    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),
-    colors: colors,
-    dataset: dataset,
-    sx: sx,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
-    highlightedItem: highlightedItem,
-    onHighlightChange: onHighlightChange,
-    children: [onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, {
-      onAxisClick: onAxisClick
-    }), grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, {
-      vertical: grid.vertical,
-      horizontal: grid.horizontal
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-      clipPath: `url(#${clipPathId})`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, {
-        slots: slots,
-        slotProps: slotProps,
-        skipAnimation: skipAnimation,
-        onItemClick: onItemClick,
-        borderRadius: borderRadius,
-        barLabel: barLabel
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
-        loading: loading,
-        slots: slots,
-        slotProps: slotProps
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
-      topAxis: topAxis,
-      leftAxis: leftAxis,
-      rightAxis: rightAxis,
-      bottomAxis: bottomAxis,
-      slots: slots,
-      slotProps: slotProps
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
-      slots: slots,
-      slotProps: slotProps
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, defaultizedAxisHighlight)), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip, {
-      slots: slots,
-      slotProps: slotProps
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
-      id: clipPathId
-    }), children]
-  });
+    chartContainerProps,
+    barPlotProps,
+    axisClickHandlerProps,
+    gridProps,
+    clipPathProps,
+    clipPathGroupProps,
+    overlayProps,
+    chartsAxisProps,
+    axisHighlightProps,
+    legendProps,
+    tooltipProps,
+    children
+  } = (0, _useBarChartProps.useBarChartProps)(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, (0, _extends2.default)({
+    ref: ref
+  }, chartContainerProps, {
+    children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps))]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+  }));
 });
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // ----------------------------- Warning --------------------------------

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/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,102 @@
+/// <reference types="react" />
+import type { BarChartProps } from './BarChart';
+/**
+ * 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: {
+        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;
+    };
+    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;
+    };
+    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,169 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Allow customization of the Pickers month and the year buttons
+- 🌍 Improve Persian (fa-IR), Portuguese (pt-PT), and Russian (ru-RU) locales on the Data Grid
+- 🌍 Improve Korean (ko-KR) and Persian (fa-IR) locales on the Date and Time Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.7.0`
+
+- [DataGrid] Add `getFilterState` method (#13418) @cherniavskii
+- [DataGrid] Do not show resize separators for column groups (#13455) @cherniavskii
+- [l10n] Improve Persian (fa-IR) locale (#13402) @fakhamatia
+- [l10n] Improve Portuguese (pt-PT) locale (#13384) @olavocarvalho
+- [l10n] Improve Russian (ru-RU) locale (#11210) @dastan-akhmetov-scity
+
+#### `@mui/x-data-grid-pro@7.7.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.7.0`, plus:
+
+- [DataGridPro] Do not render detail panel if the focused cell is not visible (#13456) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.7.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.7.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.7.0`
+
+- [l10n] Improve Korean (ko-KR) locale (#13452) @ryxxn
+- [l10n] Improve Persian (fa-IR) locale (#13402) @fakhamatia
+- [pickers] Allow to customize the month and the year buttons (#13321) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.7.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.7.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.7.0`
+
+- [charts] Add watermark on the pro `ResponsiveChartContainer` (#13398) @alexfauquette
+- [charts] Allow to specify y-axis configuration (#13438) @alexfauquette
+- [charts] Fix eslint for react compiler (#13444) @alexfauquette
+- [charts] Improve themeAugmentation typing (#13433) @noraleonte
+- [charts] Move the `ZAxisContextProvider` by default in the `ChartContainer` (#13465) @alexfauquette
+- [charts] Use plugins to define series extremum and colors (#13397) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@7.7.0`
+
+- [TreeView] Improve TypeScript for plugins (#13380) @flaviendelangle
+- [TreeView] Improve the typing of the cancelable events (#13152) @flaviendelangle
+- [TreeView] Prepare support for PigmentCSS (#13412) @flaviendelangle
+- [TreeView] Refactor the tree view internals to prepare for headless API (#13311) @flaviendelangle
+
+### Docs
+
+- [docs] Add `renderHeader` recipe to the Master Details docs (#13370) @michelengelen
+- [docs] Add lazy loading detail panel demo (#13453) @cherniavskii
+- [docs] Add small edits to the Data Grid overview page (#13060) @danilo-leal
+- [docs] Update a11y pages description (#13417) @danilo-leal
+- [docs] improve the writing on the "Quick filter outside of the grid" example (#13155) @michelengelen
+
+### Core
+
+- [core] Add `eslint-plugin-react-compiler` experimental version and rules (#13415) @JCQuintas
+- [core] Minor setup cleanup (#13467) @LukasTy
+- [infra] Adjust CI setup (#13448) @LukasTy
+- [test] Add tests for the custom slots of `TreeItem2` (#13314) @flaviendelangle
+
 ## 7.6.2
 
 _Jun 6, 2024_