@mui/x-charts 9.0.0-alpha.4 → 9.0.0-beta.0

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors.mjs

@@ -1,29 +1,70 @@
 import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
 import { selectorChartCartesianAxesGap, selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.mjs";
-function selectAxisSize(axes, axesGap, position) {
+import { selectorChartXAxisAutoSizes, selectorChartYAxisAutoSizes } from "./useChartAxisAutoSize.selectors.mjs";
+import { DEFAULT_AXIS_SIZE_HEIGHT, DEFAULT_AXIS_SIZE_WIDTH, AXIS_LABEL_DEFAULT_HEIGHT } from "../../../../constants/index.mjs";
+
+/**
+ * Returns the default fallback height for an X axis when auto-sizing is not available.
+ * This function ensures consistent fallback values between axis size calculation and rendering.
+ */
+export function getDefaultXAxisHeight(axis) {
+  return DEFAULT_AXIS_SIZE_HEIGHT + (axis.label ? AXIS_LABEL_DEFAULT_HEIGHT : 0);
+}
+
+/**
+ * Returns the default fallback width for a Y axis when auto-sizing is not available.
+ * This function ensures consistent fallback values between axis size calculation and rendering.
+ */
+export function getDefaultYAxisWidth(axis) {
+  return DEFAULT_AXIS_SIZE_WIDTH + (axis.label ? AXIS_LABEL_DEFAULT_HEIGHT : 0);
+}
+function selectXAxisSize(axes, axesGap, position, autoSizes) {
+  let axesSize = 0;
+  let nbOfAxes = 0;
+  for (const axis of axes ?? []) {
+    if (axis.position !== position) {
+      continue;
+    }
+    let axisSize;
+    if (axis.height === 'auto') {
+      axisSize = autoSizes[axis.id] ?? getDefaultXAxisHeight(axis);
+    } else {
+      axisSize = axis.height ?? 0;
+    }
+    axesSize += axisSize + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0);
+    nbOfAxes += 1;
+  }
+  return axesSize + axesGap * Math.max(0, nbOfAxes - 1);
+}
+function selectYAxisSize(axes, axesGap, position, autoSizes) {
   let axesSize = 0;
   let nbOfAxes = 0;
   for (const axis of axes ?? []) {
     if (axis.position !== position) {
       continue;
     }
-    const axisSize = position === 'top' || position === 'bottom' ? axis.height : axis.width;
-    axesSize += (axisSize || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0);
+    let axisSize;
+    if (axis.width === 'auto') {
+      axisSize = autoSizes[axis.id] ?? getDefaultYAxisWidth(axis);
+    } else {
+      axisSize = axis.width ?? 0;
+    }
+    axesSize += axisSize + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0);
     nbOfAxes += 1;
   }
   return axesSize + axesGap * Math.max(0, nbOfAxes - 1);
 }
-export const selectorChartLeftAxisSize = createSelector(selectorChartRawYAxis, selectorChartCartesianAxesGap, function selectorChartLeftAxisSize(yAxis, axesGap) {
-  return selectAxisSize(yAxis, axesGap, 'left');
+export const selectorChartLeftAxisSize = createSelector(selectorChartRawYAxis, selectorChartCartesianAxesGap, selectorChartYAxisAutoSizes, function selectorChartLeftAxisSize(yAxis, axesGap, autoSizes) {
+  return selectYAxisSize(yAxis, axesGap, 'left', autoSizes);
 });
-export const selectorChartRightAxisSize = createSelector(selectorChartRawYAxis, selectorChartCartesianAxesGap, function selectorChartRightAxisSize(yAxis, axesGap) {
-  return selectAxisSize(yAxis, axesGap, 'right');
+export const selectorChartRightAxisSize = createSelector(selectorChartRawYAxis, selectorChartCartesianAxesGap, selectorChartYAxisAutoSizes, function selectorChartRightAxisSize(yAxis, axesGap, autoSizes) {
+  return selectYAxisSize(yAxis, axesGap, 'right', autoSizes);
 });
-export const selectorChartTopAxisSize = createSelector(selectorChartRawXAxis, selectorChartCartesianAxesGap, function selectorChartTopAxisSize(xAxis, axesGap) {
-  return selectAxisSize(xAxis, axesGap, 'top');
+export const selectorChartTopAxisSize = createSelector(selectorChartRawXAxis, selectorChartCartesianAxesGap, selectorChartXAxisAutoSizes, function selectorChartTopAxisSize(xAxis, axesGap, autoSizes) {
+  return selectXAxisSize(xAxis, axesGap, 'top', autoSizes);
 });
-export const selectorChartBottomAxisSize = createSelector(selectorChartRawXAxis, selectorChartCartesianAxesGap, function selectorChartBottomAxisSize(xAxis, axesGap) {
-  return selectAxisSize(xAxis, axesGap, 'bottom');
+export const selectorChartBottomAxisSize = createSelector(selectorChartRawXAxis, selectorChartCartesianAxesGap, selectorChartXAxisAutoSizes, function selectorChartBottomAxisSize(xAxis, axesGap, autoSizes) {
+  return selectXAxisSize(xAxis, axesGap, 'bottom', autoSizes);
 });
 export const selectorChartAxisSizes = createSelectorMemoized(selectorChartLeftAxisSize, selectorChartRightAxisSize, selectorChartTopAxisSize, selectorChartBottomAxisSize, function selectorChartAxisSizes(left, right, top, bottom) {
   return {

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.d.mts

@@ -30,21 +30,17 @@ export declare const selectorDefaultXAxisTickNumber: (args_0: import("../../core
 export declare const selectorDefaultYAxisTickNumber: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => number;
-type DomainDefinition = {
-  domain: ReadonlyArray<string | NumberValue>;
-  tickNumber?: number;
-};
 export declare const selectorChartXAxisWithDomains: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.mjs").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => {
   axes: import("../../../index.mjs").DefaultedXAxis[] | undefined;
-  domains: Record<AxisId, DomainDefinition>;
+  domains: Record<AxisId, import("./domain.mjs").DomainDefinition>;
 };
 export declare const selectorChartYAxisWithDomains: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.mjs").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => {
   axes: import("../../../index.mjs").DefaultedYAxis[] | undefined;
-  domains: Record<AxisId, DomainDefinition>;
+  domains: Record<AxisId, import("./domain.mjs").DomainDefinition>;
 };
 export declare const selectorChartZoomAxisFilters: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.mjs").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
@@ -142,7 +138,7 @@ export declare const selectorChartRawAxis: (args_0: import("../../corePlugins/us
   colorMap?: import("../../../../models/colorMapping.mjs").ContinuousColorConfig | import("../../../../models/colorMapping.mjs").PiecewiseColorConfig;
 }, "scale">> & {
   position?: "left" | "right" | "none";
-  width?: number;
+  width?: number | "auto";
 } & import("../../../../hooks/useTicks.mjs").TickParams & import("../../../index.mjs").AxisConfigExtension & {
   zoom: import("./useChartCartesianAxis.types.mjs").DefaultizedZoomOptions | undefined;
 }) | undefined;
@@ -155,5 +151,4 @@ export declare const selectorChartDefaultYAxisId: (args_0: import("../../corePlu
 export declare const selectorChartSeriesEmptyFlatbushMap: () => Map<string, Flatbush>;
 export declare const selectorChartSeriesFlatbushMap: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
-}) => Map<string, Flatbush>;
-export {};
+}) => Map<string, Flatbush>;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.d.ts

@@ -30,21 +30,17 @@ export declare const selectorDefaultXAxisTickNumber: (args_0: import("../../core
 export declare const selectorDefaultYAxisTickNumber: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => number;
-type DomainDefinition = {
-  domain: ReadonlyArray<string | NumberValue>;
-  tickNumber?: number;
-};
 export declare const selectorChartXAxisWithDomains: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => {
   axes: import("../../../index.js").DefaultedXAxis[] | undefined;
-  domains: Record<AxisId, DomainDefinition>;
+  domains: Record<AxisId, import("./domain.js").DomainDefinition>;
 };
 export declare const selectorChartYAxisWithDomains: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => {
   axes: import("../../../index.js").DefaultedYAxis[] | undefined;
-  domains: Record<AxisId, DomainDefinition>;
+  domains: Record<AxisId, import("./domain.js").DomainDefinition>;
 };
 export declare const selectorChartZoomAxisFilters: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -142,7 +138,7 @@ export declare const selectorChartRawAxis: (args_0: import("../../corePlugins/us
   colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
 }, "scale">> & {
   position?: "left" | "right" | "none";
-  width?: number;
+  width?: number | "auto";
 } & import("../../../../hooks/useTicks.js").TickParams & import("../../../index.js").AxisConfigExtension & {
   zoom: import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions | undefined;
 }) | undefined;
@@ -155,5 +151,4 @@ export declare const selectorChartDefaultYAxisId: (args_0: import("../../corePlu
 export declare const selectorChartSeriesEmptyFlatbushMap: () => Map<string, Flatbush>;
 export declare const selectorChartSeriesFlatbushMap: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => Map<string, Flatbush>;
-export {};
+}) => Map<string, Flatbush>;

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

@@ -14,6 +14,7 @@ var _createAxisFilterMapper = require("./createAxisFilterMapper");
 var _createZoomLookup = require("./createZoomLookup");
 var _axis = require("../../../../models/axis");
 var _useChartCartesianAxisLayout = require("./useChartCartesianAxisLayout.selectors");
+var _useChartAxisAutoSize = require("./useChartAxisAutoSize.selectors");
 var _ticks = require("../../../ticks");
 var _getAxisScale = require("./getAxisScale");
 var _scaleGuards = require("../../../scaleGuards");
@@ -22,6 +23,7 @@ var _getAxisExtrema = require("./getAxisExtrema");
 var _domain = require("./domain");
 var _Flatbush = require("../../../Flatbush");
 var _useChartSeriesConfig = require("../../corePlugins/useChartSeriesConfig");
+var _useChartAxisExtrema = require("./useChartAxisExtrema.selectors");
 const createZoomMap = zoom => {
   const zoomItemMap = new Map();
   zoom.forEach(zoomItem => {
@@ -51,45 +53,15 @@ const selectorDefaultXAxisTickNumber = exports.selectorDefaultXAxisTickNumber =
 const selectorDefaultYAxisTickNumber = exports.selectorDefaultYAxisTickNumber = (0, _store.createSelector)(_useChartDimensions.selectorChartDrawingArea, function selectorDefaultYAxisTickNumber(drawingArea) {
   return (0, _ticks.getDefaultTickNumber)(drawingArea.height);
 });
-const selectorChartXAxisWithDomains = exports.selectorChartXAxisWithDomains = (0, _store.createSelectorMemoized)(_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeriesConfig.selectorChartSeriesConfig, selectorDefaultXAxisTickNumber, function selectorChartXAxisWithDomains(axes, formattedSeries, seriesConfig, defaultTickNumber) {
-  const axisDirection = 'x';
-  const domains = {};
-  axes?.forEach((eachAxis, axisIndex) => {
-    const axis = eachAxis;
-    if ((0, _axis.isBandScaleConfig)(axis) || (0, _axis.isPointScaleConfig)(axis)) {
-      domains[axis.id] = {
-        domain: axis.data
-      };
-      if (axis.ordinalTimeTicks !== undefined) {
-        domains[axis.id].tickNumber = (0, _ticks.getTickNumber)(axis, [axis.data?.find(d => d !== null), axis.data?.findLast(d => d !== null)], defaultTickNumber);
-      }
-      return;
-    }
-    const axisExtrema = (0, _getAxisExtrema.getAxisExtrema)(axis, axisDirection, seriesConfig, axisIndex, formattedSeries);
-    domains[axis.id] = (0, _domain.calculateInitialDomainAndTickNumber)(axis, 'x', axisIndex, formattedSeries, axisExtrema, defaultTickNumber);
-  });
+const selectorChartXAxisWithDomains = exports.selectorChartXAxisWithDomains = (0, _store.createSelectorMemoized)(_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartSeries.selectorChartSeriesProcessed, selectorDefaultXAxisTickNumber, _useChartAxisExtrema.selectorChartXAxisExtrema, function selectorChartXAxisWithDomains(axes, formattedSeries, defaultTickNumber, extremaMap) {
+  const domains = (0, _domain.computeAxisDomainsMap)(axes, formattedSeries, defaultTickNumber, extremaMap, 'x');
   return {
     axes,
     domains
   };
 });
-const selectorChartYAxisWithDomains = exports.selectorChartYAxisWithDomains = (0, _store.createSelectorMemoized)(_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeriesConfig.selectorChartSeriesConfig, selectorDefaultYAxisTickNumber, function selectorChartYAxisWithDomains(axes, formattedSeries, seriesConfig, defaultTickNumber) {
-  const axisDirection = 'y';
-  const domains = {};
-  axes?.forEach((eachAxis, axisIndex) => {
-    const axis = eachAxis;
-    if ((0, _axis.isBandScaleConfig)(axis) || (0, _axis.isPointScaleConfig)(axis)) {
-      domains[axis.id] = {
-        domain: axis.data
-      };
-      if (axis.ordinalTimeTicks !== undefined) {
-        domains[axis.id].tickNumber = (0, _ticks.getTickNumber)(axis, [axis.data?.find(d => d !== null), axis.data?.findLast(d => d !== null)], defaultTickNumber);
-      }
-      return;
-    }
-    const axisExtrema = (0, _getAxisExtrema.getAxisExtrema)(axis, axisDirection, seriesConfig, axisIndex, formattedSeries);
-    domains[axis.id] = (0, _domain.calculateInitialDomainAndTickNumber)(axis, 'y', axisIndex, formattedSeries, axisExtrema, defaultTickNumber);
-  });
+const selectorChartYAxisWithDomains = exports.selectorChartYAxisWithDomains = (0, _store.createSelectorMemoized)(_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartSeries.selectorChartSeriesProcessed, selectorDefaultYAxisTickNumber, _useChartAxisExtrema.selectorChartYAxisExtrema, function selectorChartYAxisWithDomains(axes, formattedSeries, defaultTickNumber, extremaMap) {
+  const domains = (0, _domain.computeAxisDomainsMap)(axes, formattedSeries, defaultTickNumber, extremaMap, 'y');
   return {
     axes,
     domains
@@ -238,10 +210,10 @@ const selectorChartYScales = exports.selectorChartYScales = (0, _store.createSel
  * The only interesting selectors that merge axis data and zoom if provided.
  */
 
-const selectorChartXAxis = exports.selectorChartXAxis = (0, _store.createSelectorMemoized)(_useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeriesConfig.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartXAxisWithDomains, selectorChartXScales, function selectorChartXAxis(drawingArea, formattedSeries, seriesConfig, zoomMap, {
+const selectorChartXAxis = exports.selectorChartXAxis = (0, _store.createSelectorMemoized)(_useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeriesConfig.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartXAxisWithDomains, selectorChartXScales, _useChartAxisAutoSize.selectorChartXAxisAutoSizes, _useChartCartesianAxisLayout.selectorChartCartesianAxesGap, function selectorChartXAxis(drawingArea, formattedSeries, seriesConfig, zoomMap, {
   axes,
   domains
-}, scales) {
+}, scales, autoSizes, axesGap) {
   return (0, _computeAxisValue.computeAxisValue)({
     scales,
     drawingArea,
@@ -250,13 +222,15 @@ const selectorChartXAxis = exports.selectorChartXAxis = (0, _store.createSelecto
     seriesConfig,
     axisDirection: 'x',
     zoomMap,
-    domains
+    domains,
+    autoSizes,
+    axesGap
   });
 });
-const selectorChartYAxis = exports.selectorChartYAxis = (0, _store.createSelectorMemoized)(_useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeriesConfig.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartYAxisWithDomains, selectorChartYScales, function selectorChartYAxis(drawingArea, formattedSeries, seriesConfig, zoomMap, {
+const selectorChartYAxis = exports.selectorChartYAxis = (0, _store.createSelectorMemoized)(_useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeriesConfig.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartYAxisWithDomains, selectorChartYScales, _useChartAxisAutoSize.selectorChartYAxisAutoSizes, _useChartCartesianAxisLayout.selectorChartCartesianAxesGap, function selectorChartYAxis(drawingArea, formattedSeries, seriesConfig, zoomMap, {
   axes,
   domains
-}, scales) {
+}, scales, autoSizes, axesGap) {
   return (0, _computeAxisValue.computeAxisValue)({
     scales,
     drawingArea,
@@ -265,7 +239,9 @@ const selectorChartYAxis = exports.selectorChartYAxis = (0, _store.createSelecto
     seriesConfig,
     axisDirection: 'y',
     zoomMap,
-    domains
+    domains,
+    autoSizes,
+    axesGap
   });
 });
 const selectorChartAxis = exports.selectorChartAxis = (0, _store.createSelector)(selectorChartXAxis, selectorChartYAxis, (xAxes, yAxes, axisId) => xAxes?.axis[axisId] ?? yAxes?.axis[axisId]);

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.mjs

@@ -6,15 +6,17 @@ import { computeAxisValue } from "./computeAxisValue.mjs";
 import { createContinuousScaleGetAxisFilter, createDiscreteScaleGetAxisFilter, createGetAxisFilters } from "./createAxisFilterMapper.mjs";
 import { createZoomLookup } from "./createZoomLookup.mjs";
 import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.mjs";
-import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.mjs";
-import { getDefaultTickNumber, getTickNumber } from "../../../ticks.mjs";
+import { selectorChartRawXAxis, selectorChartRawYAxis, selectorChartCartesianAxesGap } from "./useChartCartesianAxisLayout.selectors.mjs";
+import { selectorChartXAxisAutoSizes, selectorChartYAxisAutoSizes } from "./useChartAxisAutoSize.selectors.mjs";
+import { getDefaultTickNumber } from "../../../ticks.mjs";
 import { getNormalizedAxisScale, getRange } from "./getAxisScale.mjs";
 import { isOrdinalScale } from "../../../scaleGuards.mjs";
 import { zoomScaleRange } from "./zoom.mjs";
 import { getAxisExtrema } from "./getAxisExtrema.mjs";
-import { calculateFinalDomain, calculateInitialDomainAndTickNumber } from "./domain.mjs";
+import { calculateFinalDomain, computeAxisDomainsMap } from "./domain.mjs";
 import { Flatbush } from "../../../Flatbush.mjs";
 import { selectorChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.mjs";
+import { selectorChartXAxisExtrema, selectorChartYAxisExtrema } from "./useChartAxisExtrema.selectors.mjs";
 export const createZoomMap = zoom => {
   const zoomItemMap = new Map();
   zoom.forEach(zoomItem => {
@@ -43,45 +45,15 @@ export const selectorDefaultXAxisTickNumber = createSelector(selectorChartDrawin
 export const selectorDefaultYAxisTickNumber = createSelector(selectorChartDrawingArea, function selectorDefaultYAxisTickNumber(drawingArea) {
   return getDefaultTickNumber(drawingArea.height);
 });
-export const selectorChartXAxisWithDomains = createSelectorMemoized(selectorChartRawXAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorDefaultXAxisTickNumber, function selectorChartXAxisWithDomains(axes, formattedSeries, seriesConfig, defaultTickNumber) {
-  const axisDirection = 'x';
-  const domains = {};
-  axes?.forEach((eachAxis, axisIndex) => {
-    const axis = eachAxis;
-    if (isBandScaleConfig(axis) || isPointScaleConfig(axis)) {
-      domains[axis.id] = {
-        domain: axis.data
-      };
-      if (axis.ordinalTimeTicks !== undefined) {
-        domains[axis.id].tickNumber = getTickNumber(axis, [axis.data?.find(d => d !== null), axis.data?.findLast(d => d !== null)], defaultTickNumber);
-      }
-      return;
-    }
-    const axisExtrema = getAxisExtrema(axis, axisDirection, seriesConfig, axisIndex, formattedSeries);
-    domains[axis.id] = calculateInitialDomainAndTickNumber(axis, 'x', axisIndex, formattedSeries, axisExtrema, defaultTickNumber);
-  });
+export const selectorChartXAxisWithDomains = createSelectorMemoized(selectorChartRawXAxis, selectorChartSeriesProcessed, selectorDefaultXAxisTickNumber, selectorChartXAxisExtrema, function selectorChartXAxisWithDomains(axes, formattedSeries, defaultTickNumber, extremaMap) {
+  const domains = computeAxisDomainsMap(axes, formattedSeries, defaultTickNumber, extremaMap, 'x');
   return {
     axes,
     domains
   };
 });
-export const selectorChartYAxisWithDomains = createSelectorMemoized(selectorChartRawYAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorDefaultYAxisTickNumber, function selectorChartYAxisWithDomains(axes, formattedSeries, seriesConfig, defaultTickNumber) {
-  const axisDirection = 'y';
-  const domains = {};
-  axes?.forEach((eachAxis, axisIndex) => {
-    const axis = eachAxis;
-    if (isBandScaleConfig(axis) || isPointScaleConfig(axis)) {
-      domains[axis.id] = {
-        domain: axis.data
-      };
-      if (axis.ordinalTimeTicks !== undefined) {
-        domains[axis.id].tickNumber = getTickNumber(axis, [axis.data?.find(d => d !== null), axis.data?.findLast(d => d !== null)], defaultTickNumber);
-      }
-      return;
-    }
-    const axisExtrema = getAxisExtrema(axis, axisDirection, seriesConfig, axisIndex, formattedSeries);
-    domains[axis.id] = calculateInitialDomainAndTickNumber(axis, 'y', axisIndex, formattedSeries, axisExtrema, defaultTickNumber);
-  });
+export const selectorChartYAxisWithDomains = createSelectorMemoized(selectorChartRawYAxis, selectorChartSeriesProcessed, selectorDefaultYAxisTickNumber, selectorChartYAxisExtrema, function selectorChartYAxisWithDomains(axes, formattedSeries, defaultTickNumber, extremaMap) {
+  const domains = computeAxisDomainsMap(axes, formattedSeries, defaultTickNumber, extremaMap, 'y');
   return {
     axes,
     domains
@@ -230,10 +202,10 @@ export const selectorChartYScales = createSelectorMemoized(selectorChartRawYAxis
  * The only interesting selectors that merge axis data and zoom if provided.
  */
 
-export const selectorChartXAxis = createSelectorMemoized(selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartXAxisWithDomains, selectorChartXScales, function selectorChartXAxis(drawingArea, formattedSeries, seriesConfig, zoomMap, {
+export const selectorChartXAxis = createSelectorMemoized(selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartXAxisWithDomains, selectorChartXScales, selectorChartXAxisAutoSizes, selectorChartCartesianAxesGap, function selectorChartXAxis(drawingArea, formattedSeries, seriesConfig, zoomMap, {
   axes,
   domains
-}, scales) {
+}, scales, autoSizes, axesGap) {
   return computeAxisValue({
     scales,
     drawingArea,
@@ -242,13 +214,15 @@ export const selectorChartXAxis = createSelectorMemoized(selectorChartDrawingAre
     seriesConfig,
     axisDirection: 'x',
     zoomMap,
-    domains
+    domains,
+    autoSizes,
+    axesGap
   });
 });
-export const selectorChartYAxis = createSelectorMemoized(selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartYAxisWithDomains, selectorChartYScales, function selectorChartYAxis(drawingArea, formattedSeries, seriesConfig, zoomMap, {
+export const selectorChartYAxis = createSelectorMemoized(selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartYAxisWithDomains, selectorChartYScales, selectorChartYAxisAutoSizes, selectorChartCartesianAxesGap, function selectorChartYAxis(drawingArea, formattedSeries, seriesConfig, zoomMap, {
   axes,
   domains
-}, scales) {
+}, scales, autoSizes, axesGap) {
   return computeAxisValue({
     scales,
     drawingArea,
@@ -257,7 +231,9 @@ export const selectorChartYAxis = createSelectorMemoized(selectorChartDrawingAre
     seriesConfig,
     axisDirection: 'y',
     zoomMap,
-    domains
+    domains,
+    autoSizes,
+    axesGap
   });
 });
 export const selectorChartAxis = createSelector(selectorChartXAxis, selectorChartYAxis, (xAxes, yAxes, axisId) => xAxes?.axis[axisId] ?? yAxes?.axis[axisId]);

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

@@ -8,11 +8,23 @@ var _store = require("@mui/x-internals/store");
 var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
 var _useChartInteraction = require("../useChartInteraction");
+var _useChartInteraction2 = require("../useChartInteraction/useChartInteraction.selectors");
+var _useChartKeyboardNavigation = require("../useChartKeyboardNavigation/useChartKeyboardNavigation.selectors");
 var _getAxisValue = require("./getAxisValue");
 var _getValueToPositionMapper = require("../../../../hooks/getValueToPositionMapper");
 var _useChartDimensions = require("../../corePlugins/useChartDimensions/useChartDimensions.selectors");
 const selectorChartControlledCartesianAxisTooltip = state => state.controlledCartesianAxisTooltip;
 const EMPTY_ARRAY = [];
+function getKeyboardAxisTooltip(keyboardIndex, axes) {
+  if (keyboardIndex === undefined) {
+    return EMPTY_ARRAY;
+  }
+  const axis = axes.axis[keyboardIndex.axisId];
+  if (!axis?.triggerTooltip) {
+    return EMPTY_ARRAY;
+  }
+  return [keyboardIndex];
+}
 
 /**
  * Get x-axis ids and corresponding data index that should be display in the tooltip.
@@ -24,7 +36,7 @@ const selectorChartsInteractionTooltipXAxes = exports.selectorChartsInteractionT
     // uses string/number as arguments.
     resultEqualityCheck: _isDeepEqual.isDeepEqual
   }
-})(selectorChartControlledCartesianAxisTooltip, _useChartInteraction.selectorChartsInteractionPointerX, _useChartCartesianAxisRendering.selectorChartXAxis, (controlledValues, value, axes) => {
+})(selectorChartControlledCartesianAxisTooltip, _useChartInteraction.selectorChartsInteractionPointerX, _useChartCartesianAxisRendering.selectorChartXAxis, _useChartInteraction2.selectorChartsLastInteraction, _useChartKeyboardNavigation.selectorChartsKeyboardXAxisIndex, (controlledValues, value, axes, lastInteraction, keyboardIndex) => {
   if (controlledValues !== undefined) {
     if (controlledValues.length === 0) {
       return EMPTY_ARRAY;
@@ -35,6 +47,9 @@ const selectorChartsInteractionTooltipXAxes = exports.selectorChartsInteractionT
     }) => ids.has(axisId));
     return filteredArray.length === controlledValues.length ? controlledValues : filteredArray;
   }
+  if (lastInteraction === 'keyboard') {
+    return getKeyboardAxisTooltip(keyboardIndex, axes);
+  }
   if (value === null) {
     return EMPTY_ARRAY;
   }
@@ -56,7 +71,7 @@ const selectorChartsInteractionTooltipYAxes = exports.selectorChartsInteractionT
     // uses string/number as arguments.
     resultEqualityCheck: _isDeepEqual.isDeepEqual
   }
-})(selectorChartControlledCartesianAxisTooltip, _useChartInteraction.selectorChartsInteractionPointerY, _useChartCartesianAxisRendering.selectorChartYAxis, (controlledValues, value, axes) => {
+})(selectorChartControlledCartesianAxisTooltip, _useChartInteraction.selectorChartsInteractionPointerY, _useChartCartesianAxisRendering.selectorChartYAxis, _useChartInteraction2.selectorChartsLastInteraction, _useChartKeyboardNavigation.selectorChartsKeyboardYAxisIndex, (controlledValues, value, axes, lastInteraction, keyboardIndex) => {
   if (controlledValues !== undefined) {
     if (controlledValues.length === 0) {
       return EMPTY_ARRAY;
@@ -67,6 +82,9 @@ const selectorChartsInteractionTooltipYAxes = exports.selectorChartsInteractionT
     }) => ids.has(axisId));
     return filteredArray.length === controlledValues.length ? controlledValues : filteredArray;
   }
+  if (lastInteraction === 'keyboard') {
+    return getKeyboardAxisTooltip(keyboardIndex, axes);
+  }
   if (value === null) {
     return EMPTY_ARRAY;
   }

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianTooltip.selectors.mjs

@@ -2,11 +2,23 @@ import { createSelector, createSelectorMemoized, createSelectorMemoizedWithOptio
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.mjs";
 import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/index.mjs";
+import { selectorChartsLastInteraction } from "../useChartInteraction/useChartInteraction.selectors.mjs";
+import { selectorChartsKeyboardXAxisIndex, selectorChartsKeyboardYAxisIndex } from "../useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.mjs";
 import { getAxisIndex } from "./getAxisValue.mjs";
 import { getValueToPositionMapper } from "../../../../hooks/getValueToPositionMapper.mjs";
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.mjs";
 const selectorChartControlledCartesianAxisTooltip = state => state.controlledCartesianAxisTooltip;
 const EMPTY_ARRAY = [];
+function getKeyboardAxisTooltip(keyboardIndex, axes) {
+  if (keyboardIndex === undefined) {
+    return EMPTY_ARRAY;
+  }
+  const axis = axes.axis[keyboardIndex.axisId];
+  if (!axis?.triggerTooltip) {
+    return EMPTY_ARRAY;
+  }
+  return [keyboardIndex];
+}
 
 /**
  * Get x-axis ids and corresponding data index that should be display in the tooltip.
@@ -18,7 +30,7 @@ export const selectorChartsInteractionTooltipXAxes = createSelectorMemoizedWithO
     // uses string/number as arguments.
     resultEqualityCheck: isDeepEqual
   }
-})(selectorChartControlledCartesianAxisTooltip, selectorChartsInteractionPointerX, selectorChartXAxis, (controlledValues, value, axes) => {
+})(selectorChartControlledCartesianAxisTooltip, selectorChartsInteractionPointerX, selectorChartXAxis, selectorChartsLastInteraction, selectorChartsKeyboardXAxisIndex, (controlledValues, value, axes, lastInteraction, keyboardIndex) => {
   if (controlledValues !== undefined) {
     if (controlledValues.length === 0) {
       return EMPTY_ARRAY;
@@ -29,6 +41,9 @@ export const selectorChartsInteractionTooltipXAxes = createSelectorMemoizedWithO
     }) => ids.has(axisId));
     return filteredArray.length === controlledValues.length ? controlledValues : filteredArray;
   }
+  if (lastInteraction === 'keyboard') {
+    return getKeyboardAxisTooltip(keyboardIndex, axes);
+  }
   if (value === null) {
     return EMPTY_ARRAY;
   }
@@ -50,7 +65,7 @@ export const selectorChartsInteractionTooltipYAxes = createSelectorMemoizedWithO
     // uses string/number as arguments.
     resultEqualityCheck: isDeepEqual
   }
-})(selectorChartControlledCartesianAxisTooltip, selectorChartsInteractionPointerY, selectorChartYAxis, (controlledValues, value, axes) => {
+})(selectorChartControlledCartesianAxisTooltip, selectorChartsInteractionPointerY, selectorChartYAxis, selectorChartsLastInteraction, selectorChartsKeyboardYAxisIndex, (controlledValues, value, axes, lastInteraction, keyboardIndex) => {
   if (controlledValues !== undefined) {
     if (controlledValues.length === 0) {
       return EMPTY_ARRAY;
@@ -61,6 +76,9 @@ export const selectorChartsInteractionTooltipYAxes = createSelectorMemoizedWithO
     }) => ids.has(axisId));
     return filteredArray.length === controlledValues.length ? controlledValues : filteredArray;
   }
+  if (lastInteraction === 'keyboard') {
+    return getKeyboardAxisTooltip(keyboardIndex, axes);
+  }
   if (value === null) {
     return EMPTY_ARRAY;
   }

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.js

@@ -9,7 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useChartKeyboardNavigation = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
 var _useChartSeriesConfig = require("../../corePlugins/useChartSeriesConfig");
@@ -21,35 +20,42 @@ const useChartKeyboardNavigation = ({
   const {
     chartsLayerContainerRef
   } = instance;
-  const removeFocus = (0, _useEventCallback.default)(function removeFocus() {
-    if (store.state.keyboardNavigation.isFocused) {
-      store.set('keyboardNavigation', (0, _extends2.default)({}, store.state.keyboardNavigation, {
-        isFocused: false
-      }));
-    }
-  });
-  const restoreFocus = (0, _useEventCallback.default)(function restoreFocus() {
-    if (!store.state.keyboardNavigation.isFocused) {
-      store.update((0, _extends2.default)({}, store.state.highlight && {
-        highlight: (0, _extends2.default)({}, store.state.highlight, {
-          lastUpdate: 'keyboard'
-        })
-      }, store.state.interaction && {
-        interaction: (0, _extends2.default)({}, store.state.interaction, {
-          lastUpdate: 'keyboard'
-        })
-      }, {
-        keyboardNavigation: (0, _extends2.default)({}, store.state.keyboardNavigation, {
-          isFocused: true
-        })
-      }));
-    }
-  });
   React.useEffect(() => {
     const element = chartsLayerContainerRef.current;
     if (!element || params.disableKeyboardNavigation) {
       return undefined;
     }
+    function removeFocus(event) {
+      const root = event.currentTarget;
+      const next = event.relatedTarget;
+
+      // Avoid removing focus if we know it is moving to another children in the chart.
+      // This avoid extra computation ot remove/add focus at each keyboard pressed when navigating in the chart.
+      if (root && next instanceof Node && !root.contains(next)) {
+        if (store.state.keyboardNavigation.isFocused) {
+          store.set('keyboardNavigation', (0, _extends2.default)({}, store.state.keyboardNavigation, {
+            isFocused: false
+          }));
+        }
+      }
+    }
+    function restoreFocus() {
+      if (!store.state.keyboardNavigation.isFocused) {
+        store.update((0, _extends2.default)({}, store.state.highlight && {
+          highlight: (0, _extends2.default)({}, store.state.highlight, {
+            lastUpdate: 'keyboard'
+          })
+        }, store.state.interaction && {
+          interaction: (0, _extends2.default)({}, store.state.interaction, {
+            lastUpdate: 'keyboard'
+          })
+        }, {
+          keyboardNavigation: (0, _extends2.default)({}, store.state.keyboardNavigation, {
+            isFocused: true
+          })
+        }));
+      }
+    }
     function keyboardHandler(event) {
       let newFocusedItem = store.state.keyboardNavigation.item;
       const seriesConfig = (0, _useChartSeriesConfig.selectorChartSeriesConfig)(store.state);
@@ -83,14 +89,14 @@ const useChartKeyboardNavigation = ({
       }
     }
     element.addEventListener('keydown', keyboardHandler);
-    element.addEventListener('blur', removeFocus);
-    element.addEventListener('focus', restoreFocus);
+    element.addEventListener('focusout', removeFocus);
+    element.addEventListener('focusin', restoreFocus);
     return () => {
       element.removeEventListener('keydown', keyboardHandler);
-      element.removeEventListener('blur', removeFocus);
-      element.removeEventListener('focus', restoreFocus);
+      element.removeEventListener('focusout', removeFocus);
+      element.removeEventListener('focusin', restoreFocus);
     };
-  }, [chartsLayerContainerRef, removeFocus, restoreFocus, params.disableKeyboardNavigation, store]);
+  }, [chartsLayerContainerRef, params.disableKeyboardNavigation, store]);
   (0, _useEnhancedEffect.default)(() => {
     store.set('keyboardNavigation', (0, _extends2.default)({}, store.state.keyboardNavigation, {
       enabled: !params.disableKeyboardNavigation