@mui/x-charts 8.0.0-alpha.3 → 8.0.0-alpha.4

package/node/ChartsTooltip/useAxisTooltip.js

@@ -1,15 +1,12 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAxisTooltip = useAxisTooltip;
-var React = _interopRequireWildcard(require("react"));
 var _useSeries = require("../hooks/useSeries");
 var _CartesianProvider = require("../context/CartesianProvider");
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
 var _useStore = require("../internals/store/useStore");
 var _useSelector = require("../internals/store/useSelector");
@@ -17,6 +14,7 @@ var _getLabel = require("../internals/getLabel");
 var _isCartesian = require("../internals/isCartesian");
 var _utils = require("./utils");
 var _useAxis = require("../hooks/useAxis");
+var _useZAxis = require("../hooks/useZAxis");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 function useAxisTooltip() {
   const defaultXAxis = (0, _useAxis.useXAxis)();
@@ -32,7 +30,7 @@ function useAxisTooltip() {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  } = (0, _useZAxis.useZAxis)();
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
   if (axisData === null) {
     return null;

package/node/ChartsTooltip/useItemTooltip.js

@@ -1,22 +1,20 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useItemTooltip = useItemTooltip;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
 var _useSeries = require("../hooks/useSeries");
 var _CartesianProvider = require("../context/CartesianProvider");
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
 var _getLabel = require("../internals/getLabel");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
+var _useZAxis = require("../hooks/useZAxis");
 function useItemTooltip() {
   const store = (0, _useStore.useStore)();
   const item = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionItem);
@@ -30,7 +28,7 @@ function useItemTooltip() {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  } = (0, _useZAxis.useZAxis)();
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];

package/node/PieChart/PiePlot.js

@@ -9,13 +9,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.PiePlot = PiePlot;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _DrawingAreaProvider = require("../context/DrawingAreaProvider");
 var _PieArcPlot = require("./PieArcPlot");
 var _PieArcLabelPlot = require("./PieArcLabelPlot");
 var _getPercentageValue = require("../internals/getPercentageValue");
 var _getPieCoordinates = require("./getPieCoordinates");
 var _useSeries = require("../hooks/useSeries");
 var _AnimationProvider = require("../context/AnimationProvider");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -40,7 +40,7 @@ function PiePlot(props) {
     top,
     width,
     height
-  } = React.useContext(_DrawingAreaProvider.DrawingAreaContext);
+  } = (0, _hooks.useDrawingArea)();
   const skipAnimation = (0, _AnimationProvider.useSkipAnimation)(inSkipAnimation);
   if (seriesData === undefined) {
     return null;

package/node/ScatterChart/ScatterPlot.js

@@ -13,8 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Scatter = require("./Scatter");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _getColor = _interopRequireDefault(require("./getColor"));
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 var _useSeries = require("../hooks/useSeries");
+var _useZAxis = require("../hooks/useZAxis");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -37,7 +37,7 @@ function ScatterPlot(props) {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  } = (0, _useZAxis.useZAxis)();
   if (seriesData === undefined) {
     return null;
   }

package/node/ScatterChart/extremums.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getExtremumY = exports.getExtremumX = void 0;
-const mergeMinMax = (acc, val) => {
-  return [Math.min(acc[0], val[0]), Math.max(acc[1], val[1])];
-};
+const mergeMinMax = (acc, val) => [val[0] === null ? acc[0] : Math.min(acc[0], val[0]), val[1] === null ? acc[1] : Math.max(acc[1], val[1])];
 const getExtremumX = params => {
   const {
     series,

package/node/ScatterChart/formatter.js

@@ -18,8 +18,8 @@ const formatter = ({
     }
     const data = !datasetKeys ? seriesData.data ?? [] : dataset?.map(d => {
       return {
-        x: d[datasetKeys.x],
-        y: d[datasetKeys.y],
+        x: d[datasetKeys.x] ?? null,
+        y: d[datasetKeys.y] ?? null,
         z: datasetKeys.z && d[datasetKeys.z],
         id: d[datasetKeys.id]
       };

package/node/hooks/useColorScale.js

@@ -1,16 +1,14 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useXColorScale = useXColorScale;
 exports.useYColorScale = useYColorScale;
 exports.useZColorScale = useZColorScale;
-var React = _interopRequireWildcard(require("react"));
 var _CartesianProvider = require("../context/CartesianProvider");
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
+var _useZAxis = require("./useZAxis");
 function useXColorScale(identifier) {
   const {
     xAxis,
@@ -31,7 +29,7 @@ function useZColorScale(identifier) {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  } = (0, _useZAxis.useZAxis)();
   const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
   return zAxis[id]?.colorScale;
 }

package/node/hooks/useZAxis.js

@@ -0,0 +1,15 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useZAxis = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
+const useZAxis = () => {
+  const data = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  return data;
+};
+exports.useZAxis = useZAxis;

package/node/index.js

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

package/node/internals/consumeThemeProps.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.consumeThemeProps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _styles = require("@mui/material/styles");
+var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
+var React = _interopRequireWildcard(require("react"));
+var ReactIs = _interopRequireWildcard(require("react-is"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * A higher order component that consumes and merges the theme `defaultProps` and handles the `classes` and renders the component.
+ *
+ * This HOC will wrap a single component.
+ * If you need to render multiple components, you can manually consume the theme and render them in your component instead of using this HOC.
+ *
+ * In the example below, `MyComponent` will render the `DefaultComponent` with the `direction` prop set to `'row'` and the className set to `'my-custom-root'`.
+ *
+ * @example
+ * ```tsx
+ * createTheme({
+ *   components: {
+ *     MuiMyComponent: {
+ *       defaultProps: {
+ *         direction: 'row',
+ *       },
+ *     },
+ *   },
+ * })
+ *
+ * type MyComponentProps = {
+ *   direction: 'row' | 'column';
+ *   classes?: Record<'root', string>;
+ * };
+ *
+ * const MyComponent = consumeThemeProps(
+ *   'MuiMyComponent',
+ *   function DefaultComponent(props: MyComponentProps) {
+ *     return (
+ *       <div className={props.classes.root}>
+ *         {props.direction}
+ *       </div>
+ *     );
+ *   }
+ * );
+ *
+ * render(<MyComponent classes={{ root: 'my-custom-root' }} />);
+ * ```
+ *
+ * @param {string} name The mui component name.
+ * @param {object} options Options for the HOC.
+ * @param {Record<string, any>} options.defaultProps A set of defaults for the component, will be deep merged with the props.
+ * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
+ * @param InComponent The component to render if the slot is not provided.
+ */
+const consumeThemeProps = (name, options, InComponent) => {
+  function InternalComponent(props, ref) {
+    const themedProps = (0, _styles.useThemeProps)({
+      props,
+      // eslint-disable-next-line material-ui/mui-name-matches-component-name
+      name
+    });
+    const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};
+    const outProps = (0, _resolveProps.default)(defaultProps, themedProps);
+    const theme = (0, _styles.useTheme)();
+    const classes = options.classesResolver?.(outProps, theme);
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line react-compiler/react-compiler
+      InComponent.displayName = name;
+    }
+    const OutComponent = ReactIs.isForwardRef(InComponent) ? InComponent :
+    /*#__PURE__*/
+    // InComponent needs to be a function that accepts `(props, ref)`
+    // @ts-expect-error
+    React.forwardRef(InComponent);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(OutComponent, (0, _extends2.default)({}, outProps, {
+      classes: classes,
+      ref: ref
+    }));
+  }
+  return /*#__PURE__*/React.forwardRef(InternalComponent);
+};
+exports.consumeThemeProps = consumeThemeProps;

package/node/internals/plugins/corePlugins/useChartId/useChartId.js

@@ -35,7 +35,7 @@ useChartId.getInitialState = ({
   id
 }) => ({
   id: {
-    chartId: (0, _useChartId.createChartDefaultId)(),
+    chartId: id,
     providedChartId: id
   }
 });

package/node/internals/store/useCharts.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -7,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useChartApiInitialization = useChartApiInitialization;
 exports.useCharts = useCharts;
 var React = _interopRequireWildcard(require("react"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _ChartStore = require("../plugins/utils/ChartStore");
 var _corePlugins = require("../plugins/corePlugins");
 function useChartApiInitialization(inputApiRef) {
@@ -23,7 +25,10 @@ function useChartApiInitialization(inputApiRef) {
 let globalId = 0;
 function useCharts(inPlugins, props) {
   const plugins = React.useMemo(() => [..._corePlugins.CHART_CORE_PLUGINS, ...inPlugins], [inPlugins]);
-  const pluginParams = {}; // To generate when plugins use params.
+  const defaultChartId = (0, _useId.default)();
+  const pluginParams = {
+    id: defaultChartId
+  }; // To generate when plugins use params.
   const instanceRef = React.useRef({});
   const instance = instanceRef.current;
   const publicAPI = useChartApiInitialization(props.apiRef);
@@ -47,7 +52,9 @@ function useCharts(inPlugins, props) {
     };
     plugins.forEach(plugin => {
       if (plugin.getInitialState) {
-        Object.assign(initialState, plugin.getInitialState({}));
+        Object.assign(initialState, plugin.getInitialState({
+          id: defaultChartId
+        }));
       }
     });
     storeRef.current = new _ChartStore.ChartStore(initialState);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.0.0-alpha.3",
+  "version": "8.0.0-alpha.4",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -35,9 +35,10 @@
     "@react-spring/web": "^9.7.5",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
+    "react-is": "^18.3.1",
     "reselect": "^5.1.1",
-    "use-sync-external-store": "^1.2.2",
-    "@mui/x-charts-vendor": "8.0.0-alpha.3",
+    "use-sync-external-store": "^1.4.0",
+    "@mui/x-charts-vendor": "8.0.0-alpha.4",
     "@mui/x-internals": "8.0.0-alpha.2"
   },
   "peerDependencies": {