@mui/x-charts-pro 8.15.0 → 8.17.0

package/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -19,6 +19,8 @@ var _useZoomOnPinch = require("./gestureHooks/useZoomOnPinch");
 var _usePanOnDrag = require("./gestureHooks/usePanOnDrag");
 var _useZoomOnTapAndDrag = require("./gestureHooks/useZoomOnTapAndDrag");
 var _usePanOnPressAndDrag = require("./gestureHooks/usePanOnPressAndDrag");
+var _useZoomOnBrush = require("./gestureHooks/useZoomOnBrush");
+var _useZoomOnDoubleTapReset = require("./gestureHooks/useZoomOnDoubleTapReset");
 var _initializeZoomInteractionConfig = require("./initializeZoomInteractionConfig");
 var _initializeZoomData = require("./initializeZoomData");
 const useChartProZoom = pluginData => {
@@ -34,68 +36,44 @@ const useChartProZoom = pluginData => {
   const onZoomChange = (0, _utils.useEventCallback)(onZoomChangeProp ?? (() => {}));
   const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
   (0, _useEffectAfterFirstRender.useEffectAfterFirstRender)(() => {
-    store.update(prevState => {
-      return (0, _extends2.default)({}, prevState, {
-        zoom: (0, _extends2.default)({}, prevState.zoom, {
-          zoomInteractionConfig: (0, _initializeZoomInteractionConfig.initializeZoomInteractionConfig)(zoomInteractionConfig)
-        })
-      });
-    });
+    store.set('zoom', (0, _extends2.default)({}, store.state.zoom, {
+      zoomInteractionConfig: (0, _initializeZoomInteractionConfig.initializeZoomInteractionConfig)(zoomInteractionConfig)
+    }));
   }, [store, zoomInteractionConfig]);
 
+  // This is debounced. We want to run it only once after the interaction ends.
+  const removeIsInteracting = React.useMemo(() => (0, _debounce.default)(() => store.set('zoom', (0, _extends2.default)({}, store.state.zoom, {
+    isInteracting: false
+  })), 166), [store]);
+
   // Manage controlled state
   React.useEffect(() => {
     if (paramsZoomData === undefined) {
-      return undefined;
+      return;
     }
-    store.update(prevState => {
-      if (process.env.NODE_ENV !== 'production' && !prevState.zoom.isControlled) {
-        console.error([`MUI X Charts: A chart component is changing the \`zoomData\` from uncontrolled to controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
-      }
-      return (0, _extends2.default)({}, prevState, {
-        zoom: (0, _extends2.default)({}, prevState.zoom, {
-          isInteracting: true,
-          zoomData: paramsZoomData
-        })
-      });
-    });
-    const timeout = setTimeout(() => {
-      store.update(prevState => {
-        return (0, _extends2.default)({}, prevState, {
-          zoom: (0, _extends2.default)({}, prevState.zoom, {
-            isInteracting: false
-          })
-        });
-      });
-    }, 166);
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [store, paramsZoomData]);
-
-  // This is debounced. We want to run it only once after the interaction ends.
-  const removeIsInteracting = React.useMemo(() => (0, _debounce.default)(() => store.update(prevState => {
-    return (0, _extends2.default)({}, prevState, {
-      zoom: (0, _extends2.default)({}, prevState.zoom, {
-        isInteracting: false
-      })
-    });
-  }), 166), [store]);
+    if (process.env.NODE_ENV !== 'production' && !store.state.zoom.isControlled) {
+      console.error([`MUI X Charts: A chart component is changing the \`zoomData\` from uncontrolled to controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+    }
+    store.set('zoom', (0, _extends2.default)({}, store.state.zoom, {
+      isInteracting: true,
+      zoomData: paramsZoomData
+    }));
+    removeIsInteracting();
+  }, [store, paramsZoomData, removeIsInteracting]);
   const setZoomDataCallback = React.useCallback(zoomData => {
-    store.update(prevState => {
-      const newZoomData = typeof zoomData === 'function' ? zoomData([...prevState.zoom.zoomData]) : zoomData;
-      onZoomChange?.(newZoomData);
-      if (prevState.zoom.isControlled) {
-        return prevState;
-      }
+    const newZoomData = typeof zoomData === 'function' ? zoomData([...store.state.zoom.zoomData]) : zoomData;
+    onZoomChange(newZoomData);
+    if (store.state.zoom.isControlled) {
+      store.set('zoom', (0, _extends2.default)({}, store.state.zoom, {
+        isInteracting: true
+      }));
+    } else {
+      store.set('zoom', (0, _extends2.default)({}, store.state.zoom, {
+        isInteracting: true,
+        zoomData: newZoomData
+      }));
       removeIsInteracting();
-      return (0, _extends2.default)({}, prevState, {
-        zoom: (0, _extends2.default)({}, prevState.zoom, {
-          isInteracting: true,
-          zoomData: newZoomData
-        })
-      });
-    });
+    }
   }, [onZoomChange, store, removeIsInteracting]);
   const setAxisZoomData = React.useCallback((axisId, zoomData) => {
     setZoomDataCallback(prev => prev.map(prevZoom => {
@@ -145,6 +123,8 @@ const useChartProZoom = pluginData => {
   (0, _useZoomOnWheel.useZoomOnWheel)(pluginData, setZoomDataCallback);
   (0, _useZoomOnPinch.useZoomOnPinch)(pluginData, setZoomDataCallback);
   (0, _useZoomOnTapAndDrag.useZoomOnTapAndDrag)(pluginData, setZoomDataCallback);
+  (0, _useZoomOnBrush.useZoomOnBrush)(pluginData, setZoomDataCallback);
+  (0, _useZoomOnDoubleTapReset.useZoomOnDoubleTapReset)(pluginData, setZoomDataCallback);
   const zoom = React.useCallback(step => {
     setZoomDataCallback(prev => prev.map(zoomData => {
       const zoomOptions = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.getSnapshot(), zoomData.axisId);

package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts

@@ -1,34 +1,18 @@
 import { AxisId, ChartRootSelector } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
-export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature>;
-export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature, 'zoom'>;
+export declare const selectorChartZoomIsInteracting: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & {
+}) => boolean;
+export declare const selectorChartZoomIsEnabled: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-}, boolean, any[]>;
-export declare const selectorChartZoomIsEnabled: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+}) => boolean;
+export declare const selectorChartAxisZoomData: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & {
+}, axisId: AxisId) => import("@mui/x-charts/internals").ZoomData | undefined;
+export declare const selectorChartCanZoomOut: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & {
+}) => boolean;
+export declare const selectorChartCanZoomIn: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-}, boolean, []>;
-export declare const selectorChartAxisZoomData: import("reselect").Selector<any, import("@mui/x-charts/internals").ZoomData | undefined, [axisId: AxisId]>;
-export declare const selectorChartCanZoomOut: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-}, boolean, any[]>;
-export declare const selectorChartCanZoomIn: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-}, boolean, any[]>;
+}) => boolean;

package/internals/plugins/useChartProZoom/useChartProZoom.selectors.js

@@ -9,7 +9,7 @@ const selectorChartZoomState = state => state.zoom;
 exports.selectorChartZoomState = selectorChartZoomState;
 const selectorChartZoomIsInteracting = exports.selectorChartZoomIsInteracting = (0, _internals.createSelector)([selectorChartZoomState], zoom => zoom.isInteracting);
 const selectorChartZoomIsEnabled = exports.selectorChartZoomIsEnabled = (0, _internals.createSelector)([_internals.selectorChartZoomOptionsLookup], optionsLookup => Object.keys(optionsLookup).length > 0);
-const selectorChartAxisZoomData = exports.selectorChartAxisZoomData = (0, _internals.createSelector)([_internals.selectorChartZoomMap, (state, axisId) => axisId], (zoomMap, axisId) => zoomMap?.get(axisId));
+const selectorChartAxisZoomData = exports.selectorChartAxisZoomData = (0, _internals.createSelector)([_internals.selectorChartZoomMap], (zoomMap, axisId) => zoomMap?.get(axisId));
 const selectorChartCanZoomOut = exports.selectorChartCanZoomOut = (0, _internals.createSelector)([selectorChartZoomState, _internals.selectorChartZoomOptionsLookup], (zoomState, zoomOptions) => {
   return zoomState.zoomData.every(zoomData => {
     const span = zoomData.end - zoomData.start;

package/internals/plugins/useChartProZoom/useChartProZoom.types.d.ts

@@ -1,4 +1,4 @@
-import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature, UseChartCartesianAxisDefaultizedParameters, ZoomData, AxisId } from '@mui/x-charts/internals';
+import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature, UseChartCartesianAxisDefaultizedParameters, ZoomData, AxisId, type UseChartBrushSignature } from '@mui/x-charts/internals';
 import { ZoomInteractionConfig, DefaultizedZoomInteractionConfig } from "./ZoomInteractionConfig.types.js";
 export interface UseChartProZoomParameters {
   /**
@@ -80,5 +80,5 @@ export type UseChartProZoomSignature = ChartPluginSignature<{
   state: UseChartProZoomState;
   publicAPI: UseChartProZoomPublicApi;
   instance: UseChartProZoomInstance;
-  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
+  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature, UseChartBrushSignature];
 }>;

package/models/seriesType/heatmap.d.ts

@@ -1,7 +1,7 @@
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { CommonDefaultizedProps, CommonSeriesType, CartesianSeriesType } from '@mui/x-charts/internals';
 export type HeatmapValueType = readonly [number, number, number];
-export interface HeatmapSeriesType extends Omit<CommonSeriesType<HeatmapValueType>, 'color'>, CartesianSeriesType {
+export interface HeatmapSeriesType extends Omit<CommonSeriesType<HeatmapValueType>, 'color' | 'colorGetter'>, CartesianSeriesType {
   type: 'heatmap';
   /**
    * Data associated to each bar.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.15.0",
+  "version": "8.17.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Charts components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -31,11 +31,11 @@
     "@mui/utils": "^7.3.3",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
+    "@mui/x-charts": "8.17.0",
     "@mui/x-charts-vendor": "8.15.0",
-    "@mui/x-charts": "8.15.0",
     "@mui/x-internal-gestures": "0.3.4",
-    "@mui/x-internals": "8.14.0",
-    "@mui/x-license": "8.15.0"
+    "@mui/x-license": "8.17.0",
+    "@mui/x-internals": "8.17.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",