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

package/ChartsLabel/ChartsLabelMark.mjs

@@ -2,13 +2,15 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["type", "color", "className", "classes"];
+const _excluded = ["type", "markShape", "color", "className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
+import { styled, useTheme } from '@mui/material/styles';
+import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
 import { labelMarkClasses, useUtilityClasses } from "./labelMarkClasses.mjs";
 import { consumeThemeProps } from "../internals/consumeThemeProps.mjs";
+import { getSymbol } from "../internals/getSymbol.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Root = styled('div', {
   name: 'MuiChartsLabelMark',
@@ -27,6 +29,11 @@ const Root = styled('div', {
       height: 8,
       alignItems: 'center'
     },
+    [`&.${labelMarkClasses.lineAndMark}`]: {
+      width: 16,
+      height: 16,
+      alignItems: 'center'
+    },
     [`&.${labelMarkClasses.square}`]: {
       height: 13,
       width: 13,
@@ -55,12 +62,14 @@ const ChartsLabelMark = consumeThemeProps('MuiChartsLabelMark', {
 }, function ChartsLabelMark(props, ref) {
   const {
       type,
+      markShape,
       color,
       className,
       classes
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const Component = type;
+  const theme = useTheme();
   return /*#__PURE__*/_jsx(Root, _extends({
     className: clsx(classes?.root, className),
     ownerState: props,
@@ -91,7 +100,24 @@ const ChartsLabelMark = consumeThemeProps('MuiChartsLabelMark', {
           strokeLinecap: "round",
           vectorEffect: "non-scaling-stroke"
         })
-      }), type !== 'line' && type !== 'circle' && /*#__PURE__*/_jsx("svg", {
+      }), type === 'line+mark' && /*#__PURE__*/_jsxs("svg", {
+        viewBox: "0 0 16 16",
+        preserveAspectRatio: "none",
+        children: [/*#__PURE__*/_jsx("path", {
+          className: classes?.fill,
+          d: "M 1 8 L 15 8",
+          stroke: color,
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          vectorEffect: "non-scaling-stroke"
+        }), markShape && /*#__PURE__*/_jsx("path", {
+          d: d3Symbol(d3SymbolsFill[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__*/_jsx("svg", {
         viewBox: "0 0 13 13",
         children: /*#__PURE__*/_jsx("rect", {
           className: classes?.fill,

package/ChartsLabel/labelMarkClasses.d.mts

@@ -4,6 +4,8 @@ export interface ChartsLabelMarkClasses {
   root: string;
   /** Styles applied to the mark type "line". */
   line: string;
+  /** Styles applied to the mark type "line+mark". */
+  lineAndMark: string;
   /** Styles applied to the mark type "square". */
   square: string;
   /** Styles applied to the mark type "circle". */

package/ChartsLabel/labelMarkClasses.d.ts

@@ -4,6 +4,8 @@ export interface ChartsLabelMarkClasses {
   root: string;
   /** Styles applied to the mark type "line". */
   line: string;
+  /** Styles applied to the mark type "line+mark". */
+  lineAndMark: string;
   /** Styles applied to the mark type "square". */
   square: string;
   /** Styles applied to the mark type "circle". */

package/ChartsLabel/labelMarkClasses.js

@@ -12,7 +12,7 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getLabelMarkUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiChartsLabelMark', slot);
 }
-const labelMarkClasses = exports.labelMarkClasses = (0, _generateUtilityClasses.default)('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'fill']);
+const labelMarkClasses = exports.labelMarkClasses = (0, _generateUtilityClasses.default)('MuiChartsLabelMark', ['root', 'line', 'lineAndMark', 'square', 'circle', 'fill']);
 const useUtilityClasses = props => {
   const {
     type

package/ChartsLabel/labelMarkClasses.mjs

@@ -4,7 +4,7 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getLabelMarkUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLabelMark', slot);
 }
-export const labelMarkClasses = generateUtilityClasses('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'fill']);
+export const labelMarkClasses = generateUtilityClasses('MuiChartsLabelMark', ['root', 'line', 'lineAndMark', 'square', 'circle', 'fill']);
 export const useUtilityClasses = props => {
   const {
     type

package/ChartsLayerContainer/ChartsLayerContainer.d.mts

@@ -1,6 +1,16 @@
 import * as React from 'react';
 import { type SxProps, type Theme } from '@mui/material/styles';
 export interface ChartsLayerContainerProps extends React.ComponentProps<'div'> {
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
   sx?: SxProps<Theme>;
 }
 /**

package/ChartsLayerContainer/ChartsLayerContainer.d.ts

@@ -1,6 +1,16 @@
 import * as React from 'react';
 import { type SxProps, type Theme } from '@mui/material/styles';
 export interface ChartsLayerContainerProps extends React.ComponentProps<'div'> {
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
   sx?: SxProps<Theme>;
 }
 /**

package/ChartsLayerContainer/ChartsLayerContainer.js

@@ -10,16 +10,19 @@ 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 _clsx = _interopRequireDefault(require("clsx"));
 var _warning = require("@mui/x-internals/warning");
 var _styles = require("@mui/material/styles");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _chartsSurfaceClasses = require("../ChartsSurface/chartsSurfaceClasses");
 var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _hooks = require("../hooks");
 var _ChartsSurface = require("../ChartsSurface");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children"]; // eslint-disable-next-line import/no-cycle
+const _excluded = ["children", "title", "desc", "className"]; // eslint-disable-next-line import/no-cycle
 const ChartsLayerContainerDiv = (0, _styles.styled)('div', {
   name: 'MuiChartsLayerContainer',
   slot: 'Root'
@@ -49,8 +52,9 @@ const ChartsLayerContainerDiv = (0, _styles.styled)('div', {
  */
 const ChartsLayerContainer = exports.ChartsLayerContainer = /*#__PURE__*/React.forwardRef(function ChartsLayerContainer(inProps, ref) {
   const {
-    store
-  } = (0, _ChartProvider.useChartContext)();
+    store,
+    instance
+  } = (0, _ChartsProvider.useChartsContext)();
   const propsWidth = store.use(_useChartDimensions.selectorChartPropsWidth);
   const propsHeight = store.use(_useChartDimensions.selectorChartPropsHeight);
   const isKeyboardNavigationEnabled = store.use(_useChartKeyboardNavigation.selectorChartsIsKeyboardNavigationEnabled);
@@ -59,11 +63,16 @@ const ChartsLayerContainer = exports.ChartsLayerContainer = /*#__PURE__*/React.f
     name: 'MuiChartsLayerContainer'
   });
   const {
-      children
+      children,
+      title,
+      desc,
+      className
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
+  const classes = (0, _chartsSurfaceClasses.useUtilityClasses)();
   const chartsLayerContainerRef = (0, _hooks.useChartsLayerContainerRef)();
   const handleRef = (0, _useForkRef.default)(chartsLayerContainerRef, ref);
+  const descId = (0, _useId.default)();
   if (process.env.NODE_ENV !== 'production') {
     React.Children.forEach(children, child => {
       if (typeof child === 'object' && child != null && 'type' in child && child.type === _ChartsSurface.ChartsSurface) {
@@ -71,15 +80,36 @@ const ChartsLayerContainer = exports.ChartsLayerContainer = /*#__PURE__*/React.f
       }
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsLayerContainerDiv, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartsLayerContainerDiv, (0, _extends2.default)({
     ref: handleRef,
     ownerState: {
       width: propsWidth,
       height: propsHeight
     },
-    tabIndex: isKeyboardNavigationEnabled ? 0 : undefined
+    tabIndex: isKeyboardNavigationEnabled ? 0 : undefined,
+    "aria-label": title,
+    "aria-describedby": desc ? descId : undefined,
+    className: (0, _clsx.default)(classes.root, className)
   }, other, {
-    children: children
+    onPointerEnter: event => {
+      other.onPointerEnter?.(event);
+      instance.handlePointerEnter?.(event);
+    },
+    onPointerLeave: event => {
+      other.onPointerLeave?.(event);
+      instance.handlePointerLeave?.(event);
+    },
+    onClick: event => {
+      other.onClick?.(event);
+      instance.handleClick?.(event);
+    },
+    children: [desc && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      id: descId,
+      style: {
+        display: 'none'
+      },
+      children: desc
+    }), children]
   }));
 });
 if (process.env.NODE_ENV !== "production") ChartsLayerContainer.displayName = "ChartsLayerContainer";
@@ -88,5 +118,15 @@ process.env.NODE_ENV !== "production" ? ChartsLayerContainer.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  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])
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc: _propTypes.default.string,
+  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]),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title: _propTypes.default.string
 } : void 0;

package/ChartsLayerContainer/ChartsLayerContainer.mjs

@@ -1,18 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children"];
+const _excluded = ["children", "title", "desc", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { warnOnce } from '@mui/x-internals/warning';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useForkRef from '@mui/utils/useForkRef';
+import useId from '@mui/utils/useId';
+import { useUtilityClasses } from "../ChartsSurface/chartsSurfaceClasses.mjs";
 import { selectorChartPropsHeight, selectorChartPropsWidth } from "../internals/plugins/corePlugins/useChartDimensions/index.mjs";
 import { selectorChartsIsKeyboardNavigationEnabled } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { useChartsLayerContainerRef } from "../hooks/index.mjs";
 // eslint-disable-next-line import/no-cycle
 import { ChartsSurface } from "../ChartsSurface/index.mjs";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartsLayerContainerDiv = styled('div', {
   name: 'MuiChartsLayerContainer',
   slot: 'Root'
@@ -42,8 +45,9 @@ const ChartsLayerContainerDiv = styled('div', {
  */
 const ChartsLayerContainer = /*#__PURE__*/React.forwardRef(function ChartsLayerContainer(inProps, ref) {
   const {
-    store
-  } = useChartContext();
+    store,
+    instance
+  } = useChartsContext();
   const propsWidth = store.use(selectorChartPropsWidth);
   const propsHeight = store.use(selectorChartPropsHeight);
   const isKeyboardNavigationEnabled = store.use(selectorChartsIsKeyboardNavigationEnabled);
@@ -52,11 +56,16 @@ const ChartsLayerContainer = /*#__PURE__*/React.forwardRef(function ChartsLayerC
     name: 'MuiChartsLayerContainer'
   });
   const {
-      children
+      children,
+      title,
+      desc,
+      className
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
+  const classes = useUtilityClasses();
   const chartsLayerContainerRef = useChartsLayerContainerRef();
   const handleRef = useForkRef(chartsLayerContainerRef, ref);
+  const descId = useId();
   if (process.env.NODE_ENV !== 'production') {
     React.Children.forEach(children, child => {
       if (typeof child === 'object' && child != null && 'type' in child && child.type === ChartsSurface) {
@@ -64,15 +73,36 @@ const ChartsLayerContainer = /*#__PURE__*/React.forwardRef(function ChartsLayerC
       }
     });
   }
-  return /*#__PURE__*/_jsx(ChartsLayerContainerDiv, _extends({
+  return /*#__PURE__*/_jsxs(ChartsLayerContainerDiv, _extends({
     ref: handleRef,
     ownerState: {
       width: propsWidth,
       height: propsHeight
     },
-    tabIndex: isKeyboardNavigationEnabled ? 0 : undefined
+    tabIndex: isKeyboardNavigationEnabled ? 0 : undefined,
+    "aria-label": title,
+    "aria-describedby": desc ? descId : undefined,
+    className: clsx(classes.root, className)
   }, other, {
-    children: children
+    onPointerEnter: event => {
+      other.onPointerEnter?.(event);
+      instance.handlePointerEnter?.(event);
+    },
+    onPointerLeave: event => {
+      other.onPointerLeave?.(event);
+      instance.handlePointerLeave?.(event);
+    },
+    onClick: event => {
+      other.onClick?.(event);
+      instance.handleClick?.(event);
+    },
+    children: [desc && /*#__PURE__*/_jsx("span", {
+      id: descId,
+      style: {
+        display: 'none'
+      },
+      children: desc
+    }), children]
   }));
 });
 if (process.env.NODE_ENV !== "production") ChartsLayerContainer.displayName = "ChartsLayerContainer";
@@ -81,6 +111,16 @@ process.env.NODE_ENV !== "production" ? ChartsLayerContainer.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc: PropTypes.string,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title: PropTypes.string
 } : void 0;
 export { ChartsLayerContainer };

package/ChartsLayerContainer/chartsLayerContainerClasses.d.mts

@@ -0,0 +1,6 @@
+export interface ChartsLayerContainerClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export declare const useUtilityClasses: () => Record<"root", string>;
+export declare const chartsLayerContainerClasses: ChartsLayerContainerClasses;

package/ChartsLayerContainer/chartsLayerContainerClasses.d.ts

@@ -0,0 +1,6 @@
+export interface ChartsLayerContainerClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export declare const useUtilityClasses: () => Record<"root", string>;
+export declare const chartsLayerContainerClasses: ChartsLayerContainerClasses;

package/ChartsLayerContainer/chartsLayerContainerClasses.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUtilityClasses = exports.chartsLayerContainerClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+function getLayerContainerUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsLayerContainer', slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['root']
+  };
+  return (0, _composeClasses.default)(slots, getLayerContainerUtilityClass);
+};
+exports.useUtilityClasses = useUtilityClasses;
+const chartsLayerContainerClasses = exports.chartsLayerContainerClasses = (0, _generateUtilityClasses.default)('MuiChartsLayerContainer', ['root']);

package/ChartsLayerContainer/chartsLayerContainerClasses.mjs

@@ -0,0 +1,13 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import composeClasses from '@mui/utils/composeClasses';
+function getLayerContainerUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsLayerContainer', slot);
+}
+export const useUtilityClasses = () => {
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getLayerContainerUtilityClass);
+};
+export const chartsLayerContainerClasses = generateUtilityClasses('MuiChartsLayerContainer', ['root']);

package/ChartsLegend/ChartsLegend.js

@@ -20,7 +20,7 @@ var _onClickContextBuilder = require("./onClickContextBuilder");
 var _chartsLegendClasses = require("./chartsLegendClasses");
 var _consumeSlots = require("../internals/consumeSlots");
 var _ChartsLabel = require("../ChartsLabel/ChartsLabel");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _useChartVisibilityManager = require("../internals/plugins/featurePlugins/useChartVisibilityManager");
 var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -81,7 +81,7 @@ const ChartsLegend = exports.ChartsLegend = (0, _consumeSlots.consumeSlots)('Mui
   const data = (0, _useLegend.useLegend)();
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const store = (0, _useStore.useStore)();
   const isItemVisible = store.use(_useChartVisibilityManager.selectorIsItemVisibleGetter);
   const {
@@ -129,7 +129,8 @@ const ChartsLegend = exports.ChartsLegend = (0, _consumeSlots.consumeSlots)('Mui
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
             className: classes?.mark,
             color: item.color,
-            type: item.markType
+            type: item.markType,
+            markShape: item.markShape
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabel.ChartsLabel, {
             className: classes?.label,
             children: item.label
@@ -139,7 +140,8 @@ const ChartsLegend = exports.ChartsLegend = (0, _consumeSlots.consumeSlots)('Mui
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
             className: classes?.mark,
             color: item.color,
-            type: item.markType
+            type: item.markType,
+            markShape: item.markShape
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabel.ChartsLabel, {
             className: classes?.label,
             children: item.label

package/ChartsLegend/ChartsLegend.mjs

@@ -14,7 +14,7 @@ import { seriesContextBuilder } from "./onClickContextBuilder.mjs";
 import { legendClasses, useUtilityClasses } from "./chartsLegendClasses.mjs";
 import { consumeSlots } from "../internals/consumeSlots.mjs";
 import { ChartsLabel } from "../ChartsLabel/ChartsLabel.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { selectorIsItemVisibleGetter } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.mjs";
 import { useStore } from "../internals/store/useStore.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -74,7 +74,7 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
   const data = useLegend();
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const store = useStore();
   const isItemVisible = store.use(selectorIsItemVisibleGetter);
   const {
@@ -122,7 +122,8 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
           children: [/*#__PURE__*/_jsx(ChartsLabelMark, {
             className: classes?.mark,
             color: item.color,
-            type: item.markType
+            type: item.markType,
+            markShape: item.markShape
           }), /*#__PURE__*/_jsx(ChartsLabel, {
             className: classes?.label,
             children: item.label
@@ -132,7 +133,8 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
           children: [/*#__PURE__*/_jsx(ChartsLabelMark, {
             className: classes?.mark,
             color: item.color,
-            type: item.markType
+            type: item.markType,
+            markShape: item.markShape
           }), /*#__PURE__*/_jsx(ChartsLabel, {
             className: classes?.label,
             children: item.label

package/ChartsLegend/legendContext.types.d.mts

@@ -1,5 +1,4 @@
 import { type ChartsLabelMarkProps } from "../ChartsLabel/ChartsLabelMark.mjs";
-import { type PieItemId } from "../models/index.mjs";
 import { type SeriesId } from "../models/seriesType/common.mjs";
 import type { ChartSeriesType } from "../models/seriesType/config.mjs";
 interface LegendItemContextBase {
@@ -29,6 +28,7 @@ export interface SeriesLegendItemParams extends Partial<Omit<SeriesLegendItemCon
    */
   type: ChartSeriesType;
   markType: ChartsLabelMarkProps['type'];
+  markShape?: ChartsLabelMarkProps['markShape'];
 }
 export interface SeriesLegendItemContext extends LegendItemContextBase {
   /**
@@ -41,11 +41,6 @@ export interface SeriesLegendItemContext extends LegendItemContextBase {
    * The identifier of the series
    */
   seriesId: SeriesId;
-  /**
-   * The identifier of the pie item
-   * @deprecated use `dataIndex` instead
-   */
-  itemId?: PieItemId;
   /**
    * The data index of the item in the series data array
    */

package/ChartsLegend/legendContext.types.d.ts

@@ -1,5 +1,4 @@
 import { type ChartsLabelMarkProps } from "../ChartsLabel/ChartsLabelMark.js";
-import { type PieItemId } from "../models/index.js";
 import { type SeriesId } from "../models/seriesType/common.js";
 import type { ChartSeriesType } from "../models/seriesType/config.js";
 interface LegendItemContextBase {
@@ -29,6 +28,7 @@ export interface SeriesLegendItemParams extends Partial<Omit<SeriesLegendItemCon
    */
   type: ChartSeriesType;
   markType: ChartsLabelMarkProps['type'];
+  markShape?: ChartsLabelMarkProps['markShape'];
 }
 export interface SeriesLegendItemContext extends LegendItemContextBase {
   /**
@@ -41,11 +41,6 @@ export interface SeriesLegendItemContext extends LegendItemContextBase {
    * The identifier of the series
    */
   seriesId: SeriesId;
-  /**
-   * The identifier of the pie item
-   * @deprecated use `dataIndex` instead
-   */
-  itemId?: PieItemId;
   /**
    * The data index of the item in the series data array
    */

package/ChartsLegend/onClickContextBuilder.js

@@ -9,7 +9,6 @@ const seriesContextBuilder = context => ({
   color: context.color,
   label: context.label,
   seriesId: context.seriesId,
-  itemId: context.itemId,
   dataIndex: context.dataIndex
 });
 exports.seriesContextBuilder = seriesContextBuilder;

package/ChartsLegend/onClickContextBuilder.mjs

@@ -3,6 +3,5 @@ export const seriesContextBuilder = context => ({
   color: context.color,
   label: context.label,
   seriesId: context.seriesId,
-  itemId: context.itemId,
   dataIndex: context.dataIndex
 });

package/ChartsOverlay/ChartsLoadingOverlay.js

@@ -7,17 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ChartsLoadingOverlay = ChartsLoadingOverlay;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useChartsLocalization = require("../hooks/useChartsLocalization");
 var _common = require("./common");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["message"];
 function ChartsLoadingOverlay(props) {
-  const {
-      message
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
     top,
     left,
@@ -30,7 +24,7 @@ function ChartsLoadingOverlay(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.StyledText, (0, _extends2.default)({
     x: left + width / 2,
     y: top + height / 2
-  }, other, {
-    children: message ?? localeText.loading
+  }, props, {
+    children: localeText.loading
   }));
 }

package/ChartsOverlay/ChartsLoadingOverlay.mjs

@@ -1,17 +1,11 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["message"];
 import { useDrawingArea } from "../hooks/useDrawingArea.mjs";
 import { useChartsLocalization } from "../hooks/useChartsLocalization.mjs";
 import { StyledText } from "./common.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function ChartsLoadingOverlay(props) {
-  const {
-      message
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     top,
     left,
@@ -24,7 +18,7 @@ export function ChartsLoadingOverlay(props) {
   return /*#__PURE__*/_jsx(StyledText, _extends({
     x: left + width / 2,
     y: top + height / 2
-  }, other, {
-    children: message ?? localeText.loading
+  }, props, {
+    children: localeText.loading
   }));
 }

package/ChartsOverlay/ChartsNoDataOverlay.js

@@ -7,17 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ChartsNoDataOverlay = ChartsNoDataOverlay;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useChartsLocalization = require("../hooks/useChartsLocalization");
 var _common = require("./common");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["message"];
 function ChartsNoDataOverlay(props) {
-  const {
-      message
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
     top,
     left,
@@ -30,7 +24,7 @@ function ChartsNoDataOverlay(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.StyledText, (0, _extends2.default)({
     x: left + width / 2,
     y: top + height / 2
-  }, other, {
-    children: message ?? localeText.noData
+  }, props, {
+    children: localeText.noData
   }));
 }