@mui/x-charts 8.10.0 → 8.10.2

package/esm/tests/web-components.js

@@ -10,12 +10,10 @@ export function reactToWebComponent(ReactComponent, options, renderer) {
     static get observedAttributes() {
       return [];
     }
+    [connectedSymbol] = true;
+    [propsSymbol] = (() => ({}))();
     constructor() {
       super();
-      this[connectedSymbol] = true;
-      this[contextSymbol] = void 0;
-      this[propsSymbol] = {};
-      this.container = void 0;
       if (options.shadow) {
         this.container = this.attachShadow({
           mode: options.shadow

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.10.0
+ * @mui/x-charts v8.10.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/animation/Transition.js

@@ -15,6 +15,8 @@ var _d3Timer = require("@mui/x-charts-vendor/d3-timer");
  * stopped.
  */
 class Transition {
+  elapsed = 0;
+  timer = null;
   /**
    * Create a new ResumableTransition.
    * @param duration Duration in milliseconds
@@ -22,11 +24,6 @@ class Transition {
    * @param onTick Callback function called on each animation frame with the eased time in range [0, 1].
    */
   constructor(duration, easingFn, onTick) {
-    this.duration = void 0;
-    this.elapsed = 0;
-    this.easingFn = void 0;
-    this.timer = null;
-    this.onTickCallback = void 0;
     this.duration = duration;
     this.easingFn = easingFn;
     this.onTickCallback = onTick;

package/internals/configInit.js

@@ -7,8 +7,8 @@ exports.polarSeriesTypes = exports.cartesianSeriesTypes = void 0;
 let cartesianInstance;
 let polarInstance;
 class CartesianSeriesTypes {
+  types = new Set();
   constructor() {
-    this.types = new Set();
     if (cartesianInstance) {
       throw new Error('You can only create one instance!');
     }
@@ -22,8 +22,8 @@ class CartesianSeriesTypes {
   }
 }
 class PolarSeriesTypes {
+  types = new Set();
   constructor() {
-    this.types = new Set();
     if (polarInstance) {
       throw new Error('You can only create one instance!');
     }

package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.d.ts

@@ -8,4 +8,4 @@ export declare function getAxisIndex(axisConfig: ComputedAxis, pointerValue: num
  * For a pointer coordinate, this function returns the value associated.
  * Returns `null` if the coordinate has no value associated.
  */
-export declare function getAxisValue(axisConfig: ComputedAxis, pointerValue: number, dataIndex: number): number | Date | null;
+export declare function getAxisValue(axisConfig: ComputedAxis, pointerValue: number, dataIndex: number | null): number | Date | null;

package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js

@@ -59,13 +59,12 @@ function getAxisValue(axisConfig, pointerValue, dataIndex) {
     data: axisData
   } = axisConfig;
   if (!(0, _isBandScale.isBandScale)(scale)) {
-    const value = scale.invert(pointerValue);
-    if (dataIndex < 0) {
-      return value;
+    if (dataIndex === null) {
+      return scale.invert(pointerValue);
     }
     return axisData[dataIndex];
   }
-  if (dataIndex < 0 || dataIndex >= axisData.length) {
+  if (dataIndex === null || dataIndex < 0 || dataIndex >= axisData.length) {
     return null;
   }
   return axisData[dataIndex];

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js

@@ -44,13 +44,13 @@ function valueGetter(value, axes, indexes, ids = axes.axisIds[0]) {
   return Array.isArray(ids) ? ids.map((id, axisIndex) => (0, _getAxisValue.getAxisValue)(axes.axis[id], value, indexes[axisIndex])) : (0, _getAxisValue.getAxisValue)(axes.axis[ids], value, indexes);
 }
 const selectorChartsInteractionXAxisValue = exports.selectorChartsInteractionXAxisValue = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsInteractionPointerX, _useChartCartesianAxisRendering.selectorChartXAxis, selectorChartsInteractionXAxisIndex, optionalGetAxisId], (x, xAxes, xIndex, id) => {
-  if (x === null || xIndex === null || xAxes.axisIds.length === 0) {
+  if (x === null || xAxes.axisIds.length === 0) {
     return null;
   }
   return valueGetter(x, xAxes, xIndex, id);
 });
 const selectorChartsInteractionYAxisValue = exports.selectorChartsInteractionYAxisValue = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsInteractionPointerY, _useChartCartesianAxisRendering.selectorChartYAxis, selectorChartsInteractionYAxisIndex, optionalGetAxisId], (y, yAxes, yIndex, id) => {
-  if (y === null || yIndex === null || yAxes.axisIds.length === 0) {
+  if (y === null || yAxes.axisIds.length === 0) {
     return null;
   }
   return valueGetter(y, yAxes, yIndex, id);

package/internals/plugins/utils/ChartStore.js

@@ -6,26 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartStore = void 0;
 class ChartStore {
   constructor(value) {
-    this.value = void 0;
-    this.listeners = void 0;
-    this.subscribe = fn => {
-      this.listeners.add(fn);
-      return () => {
-        this.listeners.delete(fn);
-      };
-    };
-    this.getSnapshot = () => {
-      return this.value;
-    };
-    this.update = updater => {
-      const newState = updater(this.value);
-      if (newState !== this.value) {
-        this.value = newState;
-        this.listeners.forEach(l => l(newState));
-      }
-    };
     this.value = value;
     this.listeners = new Set();
   }
+  subscribe = fn => {
+    this.listeners.add(fn);
+    return () => {
+      this.listeners.delete(fn);
+    };
+  };
+  getSnapshot = () => {
+    return this.value;
+  };
+  update = updater => {
+    const newState = updater(this.value);
+    if (newState !== this.value) {
+      this.value = newState;
+      this.listeners.forEach(l => l(newState));
+    }
+  };
 }
 exports.ChartStore = ChartStore;

package/models/axis.d.ts

@@ -194,6 +194,35 @@ export type AxisGroup = {
    * @default 6
    */
   tickSize?: number;
+  /**
+   * The style applied to ticks text.
+   */
+  tickLabelStyle?: ChartsTextProps['style'];
+};
+export type AxisGroups = {
+  /**
+   * Each group will have a label that is the stringified value of the group.
+   *
+   * @example
+   * If the axis is grouped by day, month and year.
+   *
+   * ```tsx
+   * [
+   *   { getValue: getDate },
+   *   { getValue: getMonth },
+   *   { getValue: getFullYear }
+   * ]
+   * ```
+   *
+   * Then the axis will have three rows, one for each group.
+   *
+   * ```bash
+   * | 31   | 1    | 2    |
+   * | Jan  | Feb         |
+   * | 2021               |
+   * ```
+   */
+  groups?: AxisGroup[];
 };
 export interface AxisScaleConfig {
   band: {
@@ -212,58 +241,12 @@ export interface AxisScaleConfig {
      */
     barGapRatio: number;
     colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
-    /**
-     * Each group will have a label that is the stringified value of the group.
-     *
-     * @example
-     * If the axis is grouped by day, month and year.
-     *
-     * ```tsx
-     * [
-     *   { getValue: getDate },
-     *   { getValue: getMonth },
-     *   { getValue: getFullYear }
-     * ]
-     * ```
-     *
-     * Then the axis will have three rows, one for each group.
-     *
-     * ```bash
-     * | 31   | 1    | 2    |
-     * | Jan  | Feb         |
-     * | 2021               |
-     * ```
-     */
-    groups?: AxisGroup[];
-  } & Pick<TickParams, 'tickPlacement' | 'tickLabelPlacement'>;
+  } & AxisGroups & Pick<TickParams, 'tickPlacement' | 'tickLabelPlacement'>;
   point: {
     scaleType: 'point';
     scale: ScalePoint<number | Date | string>;
     colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
-    /**
-     * Each group will have a label that is the stringified value of the group.
-     *
-     * @example
-     * If the axis is grouped by day, month and year.
-     *
-     * ```tsx
-     * [
-     *   { getValue: getDate },
-     *   { getValue: getMonth },
-     *   { getValue: getFullYear }
-     * ]
-     * ```
-     *
-     * Then the axis will have three rows, one for each group.
-     *
-     * ```bash
-     * | 31   | 1    | 2    |
-     * | Jan  | Feb         |
-     * | 2021               |
-     * ```
-     */
-    groups?: AxisGroup[];
-  };
+  } & AxisGroups;
   log: {
     scaleType: 'log';
     scale: ScaleLogarithmic<number, number>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.10.0",
+  "version": "8.10.2",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "main": "./index.js",
@@ -29,15 +29,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.2",
-    "@mui/utils": "^7.2.0",
+    "@mui/utils": "^7.3.1",
     "bezier-easing": "^2.1.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
+    "@mui/x-internals": "8.10.2",
     "@mui/x-charts-vendor": "8.6.0",
-    "@mui/x-internal-gestures": "0.2.3",
-    "@mui/x-internals": "8.10.0"
+    "@mui/x-internal-gestures": "0.2.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -58,31 +58,30 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "private": false,
+  "type": "commonjs",
+  "types": "./index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "require": {
-        "types": "./index.d.ts",
-        "default": "./index.js"
-      },
       "import": {
         "types": "./esm/index.d.ts",
         "default": "./esm/index.js"
+      },
+      "require": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
       }
     },
     "./*": {
-      "require": {
-        "types": "./*/index.d.ts",
-        "default": "./*/index.js"
-      },
       "import": {
         "types": "./esm/*/index.d.ts",
         "default": "./esm/*/index.js"
+      },
+      "require": {
+        "types": "./*/index.d.ts",
+        "default": "./*/index.js"
       }
     },
-    "./esm": null,
-    "./modern": null
-  },
-  "types": "./index.d.ts"
+    "./esm": null
+  }
 }

package/tests/web-components.js

@@ -16,12 +16,10 @@ function reactToWebComponent(ReactComponent, options, renderer) {
     static get observedAttributes() {
       return [];
     }
+    [connectedSymbol] = true;
+    [propsSymbol] = {};
     constructor() {
       super();
-      this[connectedSymbol] = true;
-      this[contextSymbol] = void 0;
-      this[propsSymbol] = {};
-      this.container = void 0;
       if (options.shadow) {
         this.container = this.attachShadow({
           mode: options.shadow