@mui/x-charts 9.0.0-alpha.2 → 9.0.0-alpha.4

package/ChartsContainer/useChartsContainerProps.js

@@ -9,7 +9,7 @@ exports.useChartsContainerProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _allPlugins = require("../internals/plugins/allPlugins");
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "enableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableHitArea", "hitAreaRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "experimentalFeatures", "plugins", "localeText", "slots", "slotProps", "disableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
 const useChartsContainerProps = props => {
   const _ref = props,
     {
@@ -28,8 +28,8 @@ const useChartsContainerProps = props => {
       onTooltipAxisChange,
       tooltipItem,
       onTooltipItemChange,
-      disableVoronoi,
-      voronoiMaxRadius,
+      disableHitArea,
+      hitAreaRadius,
       onItemClick,
       disableAxisListener,
       highlightedItem,
@@ -44,12 +44,12 @@ const useChartsContainerProps = props => {
       radiusAxis,
       skipAnimation,
       seriesConfig,
+      experimentalFeatures,
       plugins,
       localeText,
       slots,
       slotProps,
-      experimentalFeatures,
-      enableKeyboardNavigation,
+      disableKeyboardNavigation,
       brushConfig,
       onHiddenItemsChange,
       hiddenItems,
@@ -61,7 +61,7 @@ const useChartsContainerProps = props => {
     desc,
     sx
   }, other);
-  const chartDataProviderProps = {
+  const chartsDataProviderProps = {
     margin,
     series,
     colors,
@@ -76,8 +76,8 @@ const useChartsContainerProps = props => {
     onTooltipAxisChange,
     tooltipItem,
     onTooltipItemChange,
-    disableVoronoi,
-    voronoiMaxRadius,
+    disableHitArea,
+    hitAreaRadius,
     onItemClick,
     axesGap,
     xAxis,
@@ -91,7 +91,7 @@ const useChartsContainerProps = props => {
     localeText,
     seriesConfig,
     experimentalFeatures,
-    enableKeyboardNavigation,
+    disableKeyboardNavigation,
     brushConfig,
     onHiddenItemsChange,
     hiddenItems,
@@ -101,7 +101,7 @@ const useChartsContainerProps = props => {
     slotProps
   };
   return {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     chartsSurfaceProps,
     children
   };

package/ChartsContainer/useChartsContainerProps.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "enableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableHitArea", "hitAreaRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "experimentalFeatures", "plugins", "localeText", "slots", "slotProps", "disableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.mjs";
 export const useChartsContainerProps = props => {
   const _ref = props,
@@ -22,8 +22,8 @@ export const useChartsContainerProps = props => {
       onTooltipAxisChange,
       tooltipItem,
       onTooltipItemChange,
-      disableVoronoi,
-      voronoiMaxRadius,
+      disableHitArea,
+      hitAreaRadius,
       onItemClick,
       disableAxisListener,
       highlightedItem,
@@ -38,12 +38,12 @@ export const useChartsContainerProps = props => {
       radiusAxis,
       skipAnimation,
       seriesConfig,
+      experimentalFeatures,
       plugins,
       localeText,
       slots,
       slotProps,
-      experimentalFeatures,
-      enableKeyboardNavigation,
+      disableKeyboardNavigation,
       brushConfig,
       onHiddenItemsChange,
       hiddenItems,
@@ -55,7 +55,7 @@ export const useChartsContainerProps = props => {
     desc,
     sx
   }, other);
-  const chartDataProviderProps = {
+  const chartsDataProviderProps = {
     margin,
     series,
     colors,
@@ -70,8 +70,8 @@ export const useChartsContainerProps = props => {
     onTooltipAxisChange,
     tooltipItem,
     onTooltipItemChange,
-    disableVoronoi,
-    voronoiMaxRadius,
+    disableHitArea,
+    hitAreaRadius,
     onItemClick,
     axesGap,
     xAxis,
@@ -85,7 +85,7 @@ export const useChartsContainerProps = props => {
     localeText,
     seriesConfig,
     experimentalFeatures,
-    enableKeyboardNavigation,
+    disableKeyboardNavigation,
     brushConfig,
     onHiddenItemsChange,
     hiddenItems,
@@ -95,7 +95,7 @@ export const useChartsContainerProps = props => {
     slotProps
   };
   return {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     chartsSurfaceProps,
     children
   };

package/ChartsDataProvider/ChartsDataProvider.d.mts

@@ -7,7 +7,7 @@ import { type AllPluginSignatures } from "../internals/plugins/allPlugins.mjs";
 import { type ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.mjs";
 export interface ChartsDataProviderSlots extends ChartsSlots {}
 export interface ChartsDataProviderSlotProps extends ChartsSlotProps {}
-export type ChartsDataProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = React.PropsWithChildren<ChartsProviderProps<TSeries, TSignatures>['pluginParams'] & Pick<ChartsProviderProps<TSeries, TSignatures>, 'plugins'>> & ChartsLocalizationProviderProps & {
+export type ChartsDataProviderProps<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>> = React.PropsWithChildren<ChartsProviderProps<SeriesType, TSignatures>['pluginParams'] & Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'>> & ChartsLocalizationProviderProps & {
   /**
    * Slots to customize charts' components.
    */
@@ -44,7 +44,7 @@ export type ChartsDataProviderProps<TSeries extends ChartSeriesType = ChartSerie
  * </ChartsDataProvider>
  * ```
  */
-declare function ChartsDataProvider<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartsDataProviderProps<TSeries, TSignatures>): import("react/jsx-runtime").JSX.Element;
+declare function ChartsDataProvider<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>>(props: ChartsDataProviderProps<SeriesType, TSignatures>): import("react/jsx-runtime").JSX.Element;
 declare namespace ChartsDataProvider {
   var propTypes: any;
 }

package/ChartsDataProvider/ChartsDataProvider.d.ts

@@ -7,7 +7,7 @@ import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { type ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.js";
 export interface ChartsDataProviderSlots extends ChartsSlots {}
 export interface ChartsDataProviderSlotProps extends ChartsSlotProps {}
-export type ChartsDataProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = React.PropsWithChildren<ChartsProviderProps<TSeries, TSignatures>['pluginParams'] & Pick<ChartsProviderProps<TSeries, TSignatures>, 'plugins'>> & ChartsLocalizationProviderProps & {
+export type ChartsDataProviderProps<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>> = React.PropsWithChildren<ChartsProviderProps<SeriesType, TSignatures>['pluginParams'] & Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'>> & ChartsLocalizationProviderProps & {
   /**
    * Slots to customize charts' components.
    */
@@ -44,7 +44,7 @@ export type ChartsDataProviderProps<TSeries extends ChartSeriesType = ChartSerie
  * </ChartsDataProvider>
  * ```
  */
-declare function ChartsDataProvider<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartsDataProviderProps<TSeries, TSignatures>): import("react/jsx-runtime").JSX.Element;
+declare function ChartsDataProvider<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>>(props: ChartsDataProviderProps<SeriesType, TSignatures>): import("react/jsx-runtime").JSX.Element;
 declare namespace ChartsDataProvider {
   var propTypes: any;
 }

package/ChartsDataProvider/ChartsDataProvider.js

@@ -80,12 +80,6 @@ process.env.NODE_ENV !== "production" ? ChartsDataProvider.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: _propTypes.default.arrayOf(_propTypes.default.object),
-  /**
-   * Options to enable features planned for the next major.
-   */
-  experimentalFeatures: _propTypes.default.shape({
-    preferStrictDomainInLineCharts: _propTypes.default.bool
-  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/ChartsDataProvider/ChartsDataProvider.mjs

@@ -73,12 +73,6 @@ process.env.NODE_ENV !== "production" ? ChartsDataProvider.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
-  /**
-   * Options to enable features planned for the next major.
-   */
-  experimentalFeatures: PropTypes.shape({
-    preferStrictDomainInLineCharts: PropTypes.bool
-  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/ChartsDataProvider/useChartsDataProviderProps.d.mts

@@ -4,10 +4,10 @@ import { type ChartAnyPluginSignature } from "../internals/plugins/models/index.
 import { type ChartSeriesType } from "../models/seriesType/config.mjs";
 import { type AllPluginSignatures } from "../internals/plugins/allPlugins.mjs";
 import { type ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.mjs";
-export declare const useChartsDataProviderProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(inProps: ChartsDataProviderProps<TSeries, TSignatures> & ChartsLocalizationProviderProps) => {
+export declare const useChartsDataProviderProps: <SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>>(inProps: ChartsDataProviderProps<SeriesType, TSignatures> & ChartsLocalizationProviderProps) => {
   children: import("react").ReactNode;
   localeText: Partial<import("../locales/index.mjs").ChartsLocaleText> | undefined;
-  chartProviderProps: ChartsProviderProps<TSeries, TSignatures>;
+  chartProviderProps: ChartsProviderProps<SeriesType, TSignatures>;
   slots: Partial<import("./ChartsDataProvider.mjs").ChartsDataProviderSlots> | undefined;
   slotProps: Partial<import("./ChartsDataProvider.mjs").ChartsDataProviderSlotProps> | undefined;
 };

package/ChartsDataProvider/useChartsDataProviderProps.d.ts

@@ -4,10 +4,10 @@ import { type ChartAnyPluginSignature } from "../internals/plugins/models/index.
 import { type ChartSeriesType } from "../models/seriesType/config.js";
 import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { type ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.js";
-export declare const useChartsDataProviderProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(inProps: ChartsDataProviderProps<TSeries, TSignatures> & ChartsLocalizationProviderProps) => {
+export declare const useChartsDataProviderProps: <SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>>(inProps: ChartsDataProviderProps<SeriesType, TSignatures> & ChartsLocalizationProviderProps) => {
   children: import("react").ReactNode;
   localeText: Partial<import("../locales/index.js").ChartsLocaleText> | undefined;
-  chartProviderProps: ChartsProviderProps<TSeries, TSignatures>;
+  chartProviderProps: ChartsProviderProps<SeriesType, TSignatures>;
   slots: Partial<import("./ChartsDataProvider.js").ChartsDataProviderSlots> | undefined;
   slotProps: Partial<import("./ChartsDataProvider.js").ChartsDataProviderSlotProps> | undefined;
 };

package/ChartsDataProvider/useChartsDataProviderProps.js

@@ -16,7 +16,7 @@ const useChartsDataProviderProps = inProps => {
   // eslint-disable-next-line mui/material-ui-name-matches-component-name
   const themedProps = (0, _styles.useThemeProps)({
     props: inProps,
-    name: 'MuiChartDataProvider'
+    name: 'MuiChartsDataProvider'
   });
   // eslint-disable-next-line mui/material-ui-name-matches-component-name
   const props = (0, _styles.useThemeProps)({

package/ChartsDataProvider/useChartsDataProviderProps.mjs

@@ -10,7 +10,7 @@ export const useChartsDataProviderProps = inProps => {
   // eslint-disable-next-line mui/material-ui-name-matches-component-name
   const themedProps = useThemeProps({
     props: inProps,
-    name: 'MuiChartDataProvider'
+    name: 'MuiChartsDataProvider'
   });
   // eslint-disable-next-line mui/material-ui-name-matches-component-name
   const props = useThemeProps({

package/ChartsGrid/ChartsGrid.d.mts

@@ -1,5 +1,9 @@
 import { type ChartsGridClasses } from "./chartsGridClasses.mjs";
 export interface ChartsGridProps {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * Displays vertical grid.
    */

package/ChartsGrid/ChartsGrid.d.ts

@@ -1,5 +1,9 @@
 import { type ChartsGridClasses } from "./chartsGridClasses.js";
 export interface ChartsGridProps {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * Displays vertical grid.
    */

package/ChartsGrid/ChartsGrid.js

@@ -9,6 +9,7 @@ exports.ChartsGrid = ChartsGrid;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
 var _chartsGridClasses = require("./chartsGridClasses");
@@ -18,7 +19,7 @@ var _ChartsVerticalGrid = require("./ChartsVerticalGrid");
 var _ChartsHorizontalGrid = require("./ChartsHorizontalGrid");
 var _useAxis = require("../hooks/useAxis");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["vertical", "horizontal"];
+const _excluded = ["className", "vertical", "horizontal"];
 const useUtilityClasses = ({
   classes
 }) => {
@@ -45,6 +46,7 @@ function ChartsGrid(inProps) {
   });
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const {
+      className,
       vertical,
       horizontal
     } = props,
@@ -61,7 +63,7 @@ function ChartsGrid(inProps) {
   const horizontalAxis = yAxis[yAxisIds[0]];
   const verticalAxis = xAxis[xAxisIds[0]];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledComponents.GridRoot, (0, _extends2.default)({}, other, {
-    className: classes.root,
+    className: (0, _clsx.default)(classes.root, className),
     children: [vertical && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVerticalGrid.ChartsGridVertical, {
       axis: verticalAxis,
       start: drawingArea.top,

package/ChartsGrid/ChartsGrid.mjs

@@ -2,8 +2,9 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["vertical", "horizontal"];
+const _excluded = ["className", "vertical", "horizontal"];
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps } from '@mui/material/styles';
 import { getChartsGridUtilityClass } from "./chartsGridClasses.mjs";
@@ -39,6 +40,7 @@ function ChartsGrid(inProps) {
   });
   const drawingArea = useDrawingArea();
   const {
+      className,
       vertical,
       horizontal
     } = props,
@@ -55,7 +57,7 @@ function ChartsGrid(inProps) {
   const horizontalAxis = yAxis[yAxisIds[0]];
   const verticalAxis = xAxis[xAxisIds[0]];
   return /*#__PURE__*/_jsxs(GridRoot, _extends({}, other, {
-    className: classes.root,
+    className: clsx(classes.root, className),
     children: [vertical && /*#__PURE__*/_jsx(ChartsGridVertical, {
       axis: verticalAxis,
       start: drawingArea.top,

package/ChartsGrid/ChartsHorizontalGrid.js

@@ -8,7 +8,7 @@ exports.ChartsGridHorizontal = ChartsGridHorizontal;
 var React = _interopRequireWildcard(require("react"));
 var _useTicks = require("../hooks/useTicks");
 var _styledComponents = require("./styledComponents");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -16,7 +16,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function ChartsGridHorizontal(props) {
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const {
     axis,
     start,

package/ChartsGrid/ChartsHorizontalGrid.mjs

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTicks } from "../hooks/useTicks.mjs";
 import { GridLine } from "./styledComponents.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function ChartsGridHorizontal(props) {
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const {
     axis,
     start,

package/ChartsGrid/ChartsVerticalGrid.js

@@ -8,7 +8,7 @@ exports.ChartsGridVertical = ChartsGridVertical;
 var React = _interopRequireWildcard(require("react"));
 var _useTicks = require("../hooks/useTicks");
 var _styledComponents = require("./styledComponents");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -16,7 +16,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function ChartsGridVertical(props) {
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const {
     axis,
     start,

package/ChartsGrid/ChartsVerticalGrid.mjs

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTicks } from "../hooks/useTicks.mjs";
 import { GridLine } from "./styledComponents.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function ChartsGridVertical(props) {
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const {
     axis,
     start,

package/ChartsGrid/index.d.mts

@@ -1,2 +1,3 @@
 export * from "./ChartsGrid.mjs";
-export * from "./chartsGridClasses.mjs";
+export { chartsGridClasses } from "./chartsGridClasses.mjs";
+export type { ChartsGridClasses, ChartsGridClassKey } from "./chartsGridClasses.mjs";

package/ChartsGrid/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./ChartsGrid.js";
-export * from "./chartsGridClasses.js";
+export { chartsGridClasses } from "./chartsGridClasses.js";
+export type { ChartsGridClasses, ChartsGridClassKey } from "./chartsGridClasses.js";

package/ChartsGrid/index.js

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  chartsGridClasses: true
+};
+Object.defineProperty(exports, "chartsGridClasses", {
+  enumerable: true,
+  get: function () {
+    return _chartsGridClasses.chartsGridClasses;
+  }
+});
 var _ChartsGrid = require("./ChartsGrid");
 Object.keys(_ChartsGrid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsGrid[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -14,14 +24,4 @@ Object.keys(_ChartsGrid).forEach(function (key) {
     }
   });
 });
-var _chartsGridClasses = require("./chartsGridClasses");
-Object.keys(_chartsGridClasses).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _chartsGridClasses[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _chartsGridClasses[key];
-    }
-  });
-});
+var _chartsGridClasses = require("./chartsGridClasses");

package/ChartsGrid/index.mjs

@@ -1,2 +1,2 @@
 export * from "./ChartsGrid.mjs";
-export * from "./chartsGridClasses.mjs";
+export { chartsGridClasses } from "./chartsGridClasses.mjs";

package/ChartsLabel/ChartsLabelMark.d.mts

@@ -1,18 +1,25 @@
 import * as React from 'react';
 import { type SxProps, type Theme } from '@mui/material/styles';
 import { type ChartsLabelMarkClasses } from "./labelMarkClasses.mjs";
+import type { MarkShape } from "../models/seriesType/line.mjs";
 export interface ChartsLabelCustomMarkProps {
   className?: string;
   /** Color of the series this mark refers to. */
   color?: string;
 }
-export type ChartsLabelMarkType = 'square' | 'circle' | 'line' | React.ComponentType<ChartsLabelCustomMarkProps>;
+export type ChartsLabelMarkType = 'square' | 'circle' | 'line' | 'line+mark' | React.ComponentType<ChartsLabelCustomMarkProps>;
 export interface ChartsLabelMarkProps {
   /**
    * The type of the mark.
    * @default 'square'
    */
   type?: ChartsLabelMarkType;
+  /**
+   * The mark will be rendered as a combination of a line and the specified mark type.
+   * The line will be rendered first, followed by the mark.
+   * Only used if `type='line+mark'`.
+   */
+  markShape?: MarkShape;
   /**
    * The color of the mark.
    */

package/ChartsLabel/ChartsLabelMark.d.ts

@@ -1,18 +1,25 @@
 import * as React from 'react';
 import { type SxProps, type Theme } from '@mui/material/styles';
 import { type ChartsLabelMarkClasses } from "./labelMarkClasses.js";
+import type { MarkShape } from "../models/seriesType/line.js";
 export interface ChartsLabelCustomMarkProps {
   className?: string;
   /** Color of the series this mark refers to. */
   color?: string;
 }
-export type ChartsLabelMarkType = 'square' | 'circle' | 'line' | React.ComponentType<ChartsLabelCustomMarkProps>;
+export type ChartsLabelMarkType = 'square' | 'circle' | 'line' | 'line+mark' | React.ComponentType<ChartsLabelCustomMarkProps>;
 export interface ChartsLabelMarkProps {
   /**
    * The type of the mark.
    * @default 'square'
    */
   type?: ChartsLabelMarkType;
+  /**
+   * The mark will be rendered as a combination of a line and the specified mark type.
+   * The line will be rendered first, followed by the mark.
+   * Only used if `type='line+mark'`.
+   */
+  markShape?: MarkShape;
   /**
    * The color of the mark.
    */

package/ChartsLabel/ChartsLabelMark.js

@@ -11,12 +11,14 @@ 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 _styles = require("@mui/material/styles");
 var _clsx = _interopRequireDefault(require("clsx"));
+var _styles = require("@mui/material/styles");
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _labelMarkClasses = require("./labelMarkClasses");
 var _consumeThemeProps = require("../internals/consumeThemeProps");
+var _getSymbol = require("../internals/getSymbol");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["type", "color", "className", "classes"];
+const _excluded = ["type", "markShape", "color", "className", "classes"];
 const Root = (0, _styles.styled)('div', {
   name: 'MuiChartsLabelMark',
   slot: 'Root'
@@ -34,6 +36,11 @@ const Root = (0, _styles.styled)('div', {
       height: 8,
       alignItems: 'center'
     },
+    [`&.${_labelMarkClasses.labelMarkClasses.lineAndMark}`]: {
+      width: 16,
+      height: 16,
+      alignItems: 'center'
+    },
     [`&.${_labelMarkClasses.labelMarkClasses.square}`]: {
       height: 13,
       width: 13,
@@ -62,12 +69,14 @@ const ChartsLabelMark = exports.ChartsLabelMark = (0, _consumeThemeProps.consume
 }, function ChartsLabelMark(props, ref) {
   const {
       type,
+      markShape,
       color,
       className,
       classes
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const Component = type;
+  const theme = (0, _styles.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({
     className: (0, _clsx.default)(classes?.root, className),
     ownerState: props,
@@ -98,7 +107,24 @@ const ChartsLabelMark = exports.ChartsLabelMark = (0, _consumeThemeProps.consume
           strokeLinecap: "round",
           vectorEffect: "non-scaling-stroke"
         })
-      }), type !== 'line' && type !== 'circle' && /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+      }), type === 'line+mark' && /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+        viewBox: "0 0 16 16",
+        preserveAspectRatio: "none",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+          className: classes?.fill,
+          d: "M 1 8 L 15 8",
+          stroke: color,
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          vectorEffect: "non-scaling-stroke"
+        }), markShape && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+          d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _getSymbol.getSymbol)(markShape)], 32)(),
+          transform: "translate(8, 8) ",
+          stroke: color,
+          strokeWidth: 2,
+          fill: (theme.vars || theme).palette.background.paper
+        })]
+      }), type !== 'line' && type !== 'circle' && type !== 'line+mark' && /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
         viewBox: "0 0 13 13",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
           className: classes?.fill,