@mui/x-charts 8.2.0 → 8.3.0

package/CHANGELOG.md

@@ -5,6 +5,113 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.3.0
+
+_May 8, 2025_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎨 Added new styling options and shapes for `<FunnelChart />`, including `variant`, `borderRadius`, `pyramid`, and `step-pyramid` curves.
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Special thanks go out to this community member for a valuable contribution:
+@ptuukkan.
+Team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @MBilalShafi, @rita-codes, @romgrk.
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.3.0`
+
+- [DataGrid] Fix cell editing of computed columns with data source (#17684) @ptuukkan
+- [DataGrid] Fix lazy loading crash with `isRowSelectable` prop (#17629) @MBilalShafi
+- [DataGrid] Fix: use CSS nonce (#17726) @romgrk
+- [DataGrid] Ignore `preProcessEditCellProps` for non-editable columns when starting a row update (#17732) @arminmeh
+- [DataGrid] Avoid applying row selection propagation on filtered rows (#17739) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@8.3.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@8.3.0`.
+
+#### `@mui/x-data-grid-premium@8.3.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@8.3.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.3.0`
+
+- [DateTimePicker] Fix focus behavior on desktop variant (#17719) @LukasTy
+- [pickers] Avoid `DigitalClock` stealing focus from a Picker open button on close (#17686) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.3.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@8.3.0`, plus:
+
+- [DateRangePicker] Fix to reset range position after closing mobile Picker (#17631) @LukasTy
+
+### Charts
+
+- The `<FunnelChart />` series now accepts a `variant='outlined'` prop for a simpler style.
+  <img width="398" alt="Screenshot 2025-05-06 at 20 36 12" src="https://github.com/user-attachments/assets/00fef14f-9026-421e-a4b6-7e081adce1e8" />
+
+- Add a `borderRadius` property to `<FunnelChart />`. All funnels have `8px` as a default value.
+  <img width="386" alt="Screenshot 2025-05-06 at 14 00 20" src="https://github.com/user-attachments/assets/4f4cc0e7-01ce-4ed6-a0e1-a387f78def23" />
+
+- Add a `pyramid` curve to `<FunnelChart />`, which allows creation of a pyramid-shaped funnel.
+  <img width="344" alt="Screenshot 2025-05-06 at 14 32 59" src="https://github.com/user-attachments/assets/0b2896e0-0478-4766-bb1b-258a4977a751" />
+
+- Add a `step-pyramid` curve to `<FunnelChart />`, which creates a stepped-pyramid like shape.
+  <img width="344" alt="Screenshot 2025-05-06 at 14 33 03" src="https://github.com/user-attachments/assets/894f0ab3-7898-40fe-b0df-560feea4085a" />
+
+#### `@mui/x-charts@8.3.0`
+
+- [charts] Add charts toolbar with zoom options (#17615) @bernardobelchior
+- [charts] Add zoom slider (#17496) @bernardobelchior
+- [charts] Cleanup compiler warnings (#17360) @alexfauquette
+- [charts] Fix `<PieArcLabel />` not taking `arcLabelRadius` into account (#17655) @bernardobelchior
+- [charts] Fix spark line not having clip path (#17501) @bernardobelchior
+- [charts] Fix type issue with ESM (#17624) @alexfauquette
+- [charts] Improve `<MarkElement />` performance (#17546) @bernardobelchior
+- [charts] Rename `materialSlots` internal constant (#17710) @bernardobelchior
+- [charts] Update zoom slider design (#17682) @bernardobelchior
+- [charts] Fix zoom being documented as available for heatmap (#17657) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.3.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-charts@8.3.0`, plus:
+
+- [charts-pro] Add `pyramid` curve to `<FunnelChart />` (#17665) @JCQuintas
+- [charts-pro] Add `variant='outlined'` to `<FunnelChart />` series (#17661) @JCQuintas
+- [charts-pro] Add a `borderRadius` property to `<FunnelChart />` (#17660) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.3.0`
+
+- [tree view] Bug fix - Escape does not cancel Drag n Drop (#17735) @rita-codes
+- [tree view] Fix keyboard navigation error (#17685) @rita-codes
+- [tree view] Continue cleaning the plugin system (#17386) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.3.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-tree-view@8.3.0`.
+
+### Docs
+
+- [charts] Add population pyramid demo (#17652) @bernardobelchior
+- [charts] Fix randomised argos test (#17658) @JCQuintas
+- [docs] Make preview messaging consistent in charts @bernardobelchior
+
+### Core
+
+- [code-infra] Avoid `node` types in the built packages (#17533) @LukasTy
+- [code-infra] Add `pkg.pr.new` publishing (#17402) @Janpot
+- [code-infra] Normalize author package in org @oliviertassinari
+- [code-infra] Remove required checkout step (#17729) @JCQuintas
+- [docs-infra] Normalize netlify.toml in org @oliviertassinari
+
 ## 8.2.0
 
 _May 1, 2025_

package/ChartsClipPath/ChartsClipPath.d.ts

@@ -1,6 +1,14 @@
 import * as React from 'react';
 export type ChartsClipPathProps = {
+  /**
+   * The id of the clip path.
+   */
   id: string;
+  /**
+   * Offset, in pixels, of the clip path rectangle from the drawing area.
+   *
+   * A positive value will move the rectangle outside the drawing area.
+   */
   offset?: {
     top?: number;
     right?: number;

package/ChartsClipPath/ChartsClipPath.js

@@ -49,7 +49,15 @@ process.env.NODE_ENV !== "production" ? ChartsClipPath.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The id of the clip path.
+   */
   id: _propTypes.default.string.isRequired,
+  /**
+   * Offset, in pixels, of the clip path rectangle from the drawing area.
+   *
+   * A positive value will move the rectangle outside the drawing area.
+   */
   offset: _propTypes.default.shape({
     bottom: _propTypes.default.number,
     left: _propTypes.default.number,

package/LineChart/AppearingMask.js

@@ -11,7 +11,6 @@ exports.appearingMaskClasses = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _animation = require("../internals/animation/animation");
 var _cleanId = require("../internals/cleanId");
 var _hooks = require("../hooks");
@@ -42,7 +41,7 @@ function AppearingMask(props) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
       id: clipId,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedRect, {
-        className: (0, _clsx.default)(!props.skipAnimation && appearingMaskClasses.animate),
+        className: props.skipAnimation ? '' : appearingMaskClasses.animate,
         x: 0,
         y: 0,
         width: drawingArea.left + drawingArea.width + drawingArea.right,

package/LineChart/CircleMarkElement.d.ts

@@ -10,6 +10,16 @@ export type CircleMarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'is
    * The index to the element in the series' data array.
    */
   dataIndex: number;
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded?: boolean;
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted?: boolean;
 };
 /**
  * The line mark element that only render circle for performance improvement.

package/LineChart/CircleMarkElement.js

@@ -14,13 +14,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _animation = require("../internals/animation/animation");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
-var _useItemHighlighted = require("../hooks/useItemHighlighted");
 var _markElementClasses = require("./markElementClasses");
-var _useSelector = require("../internals/store/useSelector");
-var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
-var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation"];
+const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted"];
 const Circle = (0, _styles.styled)('circle')({
   [`&.${_markElementClasses.markElementClasses.animate}`]: {
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
@@ -50,7 +46,9 @@ function CircleMarkElement(props) {
       color,
       dataIndex,
       onClick,
-      skipAnimation
+      skipAnimation,
+      isFaded = false,
+      isHighlighted = false
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const theme = (0, _styles.useTheme)();
@@ -59,18 +57,10 @@ function CircleMarkElement(props) {
     seriesId: id,
     dataIndex
   });
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _useItemHighlighted.useItemHighlighted)({
-    seriesId: id
-  });
-  const store = (0, _useStore.useStore)();
-  const xAxisInteractionIndex = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionXAxisIndex);
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted: xAxisInteractionIndex === dataIndex || isHighlighted,
+    isHighlighted,
     isFaded,
     color,
     skipAnimation

package/LineChart/MarkElement.d.ts

@@ -14,6 +14,16 @@ export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighli
    * The index to the element in the series' data array.
    */
   dataIndex: number;
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded?: boolean;
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted?: boolean;
 };
 /**
  * Demos:

package/LineChart/MarkElement.js

@@ -16,13 +16,9 @@ var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _animation = require("../internals/animation/animation");
 var _getSymbol = require("../internals/getSymbol");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
-var _useItemHighlighted = require("../hooks/useItemHighlighted");
-var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _markElementClasses = require("./markElementClasses");
-var _useSelector = require("../internals/store/useSelector");
-var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation"];
+const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted"];
 const MarkElementPath = (0, _styles.styled)('path', {
   name: 'MuiMarkElement',
   slot: 'Root'
@@ -59,7 +55,9 @@ function MarkElement(props) {
       shape,
       dataIndex,
       onClick,
-      skipAnimation
+      skipAnimation,
+      isFaded = false,
+      isHighlighted = false
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)({
@@ -67,18 +65,10 @@ function MarkElement(props) {
     seriesId: id,
     dataIndex
   });
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _useItemHighlighted.useItemHighlighted)({
-    seriesId: id
-  });
-  const store = (0, _useStore.useStore)();
-  const xAxisInteractionIndex = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionXAxisIndex);
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted: xAxisInteractionIndex === dataIndex || isHighlighted,
+    isHighlighted,
     isFaded,
     color,
     skipAnimation
@@ -107,6 +97,16 @@ process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
    */
   dataIndex: _propTypes.default.number.isRequired,
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded: _propTypes.default.bool,
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted: _propTypes.default.bool,
   /**
    * The shape of the marker.
    */

package/LineChart/MarkPlot.js

@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
+var _useChartCartesianInteraction = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors");
 var _constants = require("../constants");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useChartId = require("../hooks/useChartId");
@@ -23,6 +24,7 @@ var _MarkElement = require("./MarkElement");
 var _ChartProvider = require("../context/ChartProvider");
 var _hooks = require("../hooks");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
+var _useSelector = require("../internals/store/useSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 /**
@@ -56,8 +58,14 @@ function MarkPlot(props) {
   } = (0, _hooks.useYAxes)();
   const chartId = (0, _useChartId.useChartId)();
   const {
-    instance
+    instance,
+    store
   } = (0, _ChartProvider.useChartContext)();
+  const {
+    isFaded,
+    isHighlighted
+  } = (0, _hooks.useItemHighlightedGetter)();
+  const xAxisInteractionIndex = (0, _useSelector.useSelector)(store, _useChartCartesianInteraction.selectorChartsInteractionXAxisIndex);
   if (seriesData === undefined) {
     return null;
   }
@@ -93,6 +101,12 @@ function MarkPlot(props) {
 
         const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
         const Mark = slots?.mark ?? (shape === 'circle' ? _CircleMarkElement.CircleMarkElement : _MarkElement.MarkElement);
+        const isSeriesHighlighted = isHighlighted({
+          seriesId
+        });
+        const isSeriesFaded = !isSeriesHighlighted && isFaded({
+          seriesId
+        });
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           clipPath: `url(#${clipId})`,
           children: xData?.map((x, index) => {
@@ -150,7 +164,9 @@ function MarkPlot(props) {
                 type: 'line',
                 seriesId,
                 dataIndex: index
-              }))
+              })),
+              isHighlighted: xAxisInteractionIndex === index || isSeriesHighlighted,
+              isFaded: isSeriesFaded
             }, slotProps?.mark), `${seriesId}-${index}`);
           })
         }, seriesId);

package/PieChart/PieArcLabel.js

@@ -68,8 +68,7 @@ const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function
       startAngle,
       endAngle,
       paddingAngle,
-      innerRadius,
-      outerRadius,
+      arcLabelRadius,
       cornerRadius,
       formattedArcLabel,
       isHighlighted,
@@ -90,8 +89,8 @@ const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function
     cornerRadius,
     startAngle,
     endAngle,
-    innerRadius,
-    outerRadius,
+    innerRadius: arcLabelRadius,
+    outerRadius: arcLabelRadius,
     paddingAngle,
     skipAnimation,
     ref

package/SparkLineChart/SparkLineChart.d.ts

@@ -86,6 +86,25 @@ export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series'
    * @default rainbowSurgePalette[0]
    */
   color?: ChartsColor;
+  /**
+   * When `true`, the chart's drawing area will not be clipped and elements within can visually overflow the chart.
+   *
+   * @default false
+   */
+  disableClipping?: boolean;
+  /**
+   * The clipped area offset in pixels.
+   *
+   * This prevents partial clipping of lines when they are drawn on the edge of the drawing area.
+   *
+   * @default { top: 1, right: 1, bottom: 1, left: 1 }
+   */
+  clipAreaOffset?: {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  };
 }
 /**
  * Demos:

package/SparkLineChart/SparkLineChart.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _ChartsClipPath = require("../ChartsClipPath");
 var _BarChart = require("../BarChart");
 var _LineChart = require("../LineChart");
 var _ChartContainer = require("../ChartContainer");
@@ -18,7 +20,7 @@ var _constants = require("../constants");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "color", "sx", "showTooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
+const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "color", "sx", "showTooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className", "disableClipping", "clipAreaOffset"];
 const SPARK_LINE_DEFAULT_MARGIN = 5;
 
 /**
@@ -50,9 +52,19 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
       valueFormatter = value => value === null ? '' : value.toString(),
       area,
       curve = 'linear',
-      className
+      className,
+      disableClipping,
+      clipAreaOffset
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const id = (0, _useId.default)();
+  const clipPathId = `${id}-clip-path`;
+  const clipPathOffset = {
+    top: clipAreaOffset?.top ?? 1,
+    right: clipAreaOffset?.right ?? 1,
+    bottom: clipAreaOffset?.bottom ?? 1,
+    left: clipAreaOffset?.left ?? 1
+  };
   const defaultXHighlight = showHighlight && plotType === 'bar' ? {
     x: 'band'
   } : {
@@ -99,23 +111,29 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
     colors: colors,
     sx: sx,
     disableAxisListener: (!showTooltip || slotProps?.tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
-    children: [plotType === 'bar' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, {
-      skipAnimation: true,
-      slots: slots,
-      slotProps: slotProps
-    }), plotType === 'line' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.AreaPlot, {
-        skipAnimation: true,
-        slots: slots,
-        slotProps: slotProps
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LinePlot, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+      clipPath: `url(#${clipPathId})`,
+      children: [plotType === 'bar' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, {
         skipAnimation: true,
         slots: slots,
         slotProps: slotProps
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, {
-        slots: slots,
-        slotProps: slotProps
+      }), plotType === 'line' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.AreaPlot, {
+          skipAnimation: true,
+          slots: slots,
+          slotProps: slotProps
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LinePlot, {
+          skipAnimation: true,
+          slots: slots,
+          slotProps: slotProps
+        })]
       })]
+    }), plotType === 'line' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, {
+      slots: slots,
+      slotProps: slotProps
+    }), disableClipping ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
+      id: clipPathId,
+      offset: clipPathOffset
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), showTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), children]
   }));
 });
@@ -139,6 +157,19 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }),
   children: _propTypes.default.node,
   className: _propTypes.default.string,
+  /**
+   * The clipped area offset in pixels.
+   *
+   * This prevents partial clipping of lines when they are drawn on the edge of the drawing area.
+   *
+   * @default { top: 1, right: 1, bottom: 1, left: 1 }
+   */
+  clipAreaOffset: _propTypes.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.number
+  }),
   /**
    * Color used to colorize the sparkline.
    * @default rainbowSurgePalette[0]
@@ -163,6 +194,12 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default false
    */
   disableAxisListener: _propTypes.default.bool,
+  /**
+   * When `true`, the chart's drawing area will not be clipped and elements within can visually overflow the chart.
+   *
+   * @default false
+   */
+  disableClipping: _propTypes.default.bool,
   /**
    * If true, the voronoi interaction are ignored.
    */

package/Toolbar/Toolbar.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface ToolbarProps extends React.PropsWithChildren {}
+export declare function Toolbar({
+  children
+}: ToolbarProps): React.JSX.Element;

package/Toolbar/Toolbar.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toolbar = Toolbar;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _jsxRuntime = require("react/jsx-runtime");
+const ToolbarRoot = (0, _styles.styled)('div', {
+  name: 'MuiChartsToolbar',
+  slot: 'Root'
+})(({
+  theme
+}) => ({
+  flex: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'end',
+  gap: theme.spacing(0.25),
+  padding: theme.spacing(0.5),
+  minHeight: 44,
+  boxSizing: 'border-box',
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
+  borderRadius: 4
+}));
+function Toolbar({
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarRoot, {
+    children: children
+  });
+}

package/Toolbar/ToolbarButton.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ChartBaseIconButtonProps } from "../models/slots/chartsBaseSlotProps.js";
+export interface ToolbarButtonProps extends ChartBaseIconButtonProps {}
+declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ToolbarButton };

package/Toolbar/ToolbarButton.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
+var _material = require("../internals/material");
+var _jsxRuntime = require("react/jsx-runtime");
+const ToolbarButton = exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButton(props, ref) {
+  const IconButton = _material.defaultSlotsMaterial.baseIconButton;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, (0, _extends2.default)({
+    ref: ref
+  }, props));
+});
+process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  className: _propTypes.default.string,
+  style: _propTypes.default.object
+} : void 0;

package/Toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Toolbar.js";
+export * from "./ToolbarButton.js";

package/Toolbar/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Toolbar = require("./Toolbar");
+Object.keys(_Toolbar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Toolbar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Toolbar[key];
+    }
+  });
+});
+var _ToolbarButton = require("./ToolbarButton");
+Object.keys(_ToolbarButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ToolbarButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ToolbarButton[key];
+    }
+  });
+});

package/esm/ChartsClipPath/ChartsClipPath.d.ts

@@ -1,6 +1,14 @@
 import * as React from 'react';
 export type ChartsClipPathProps = {
+  /**
+   * The id of the clip path.
+   */
   id: string;
+  /**
+   * Offset, in pixels, of the clip path rectangle from the drawing area.
+   *
+   * A positive value will move the rectangle outside the drawing area.
+   */
   offset?: {
     top?: number;
     right?: number;