@mui/x-charts 8.0.0-alpha.1 → 8.0.0-alpha.2

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartId = void 0;
+var _selectors = require("../../utils/selectors");
+const selectorChartIdState = state => state.id;
+
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+const selectorChartId = exports.selectorChartId = (0, _selectors.createSelector)(selectorChartIdState, idState => idState.chartId);

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createChartDefaultId = void 0;
+let globalChartDefaultId = 0;
+const createChartDefaultId = () => {
+  globalChartDefaultId += 1;
+  return `mui-chart-${globalChartDefaultId}`;
+};
+exports.createChartDefaultId = createChartDefaultId;

package/node/internals/plugins/featurePlugins/useChartInteraction/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useChartInteraction: true
+};
+Object.defineProperty(exports, "useChartInteraction", {
+  enumerable: true,
+  get: function () {
+    return _useChartInteraction.useChartInteraction;
+  }
+});
+var _useChartInteraction = require("./useChartInteraction");
+var _useChartInteraction2 = require("./useChartInteraction.selectors");
+Object.keys(_useChartInteraction2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartInteraction2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartInteraction2[key];
+    }
+  });
+});

package/node/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartInteraction = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+const useChartInteraction = ({
+  store
+}) => {
+  const cleanInteraction = (0, _useEventCallback.default)(() => {
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      interaction: (0, _extends2.default)({}, prev.interaction, {
+        axis: {
+          x: null,
+          y: null
+        },
+        item: null
+      })
+    }));
+  });
+  const setItemInteraction = (0, _useEventCallback.default)(newItem => {
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      interaction: (0, _extends2.default)({}, prev.interaction, {
+        item: newItem
+      })
+    }));
+  });
+  const setAxisInteraction = (0, _useEventCallback.default)(({
+    x: newStateX,
+    y: newStateY
+  }) => {
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      interaction: (0, _extends2.default)({}, prev.interaction, {
+        axis: (0, _extends2.default)({}, prev.interaction.axis, prev.interaction.axis.x?.index !== newStateX?.index || prev.interaction.axis.x?.value !== newStateX?.value ? {
+          x: newStateX
+        } : {}, prev.interaction.axis.y?.index !== newStateY?.index || prev.interaction.axis.y?.value !== newStateY?.value ? {
+          y: newStateY
+        } : {})
+      })
+    }));
+  });
+  const enableVoronoid = (0, _useEventCallback.default)(() => {
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      interaction: (0, _extends2.default)({}, prev.interaction, {
+        isVoronoiEnabled: true
+      })
+    }));
+  });
+  const disableVoronoid = (0, _useEventCallback.default)(() => {
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      interaction: (0, _extends2.default)({}, prev.interaction, {
+        isVoronoiEnabled: false
+      })
+    }));
+  });
+  return {
+    params: {},
+    instance: {
+      cleanInteraction,
+      setItemInteraction,
+      setAxisInteraction,
+      enableVoronoid,
+      disableVoronoid
+    }
+  };
+};
+exports.useChartInteraction = useChartInteraction;
+useChartInteraction.getInitialState = () => ({
+  interaction: {
+    item: null,
+    axis: {
+      x: null,
+      y: null
+    },
+    isVoronoiEnabled: false
+  }
+});
+useChartInteraction.params = {};

package/node/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartsInteractionYAxisIsDefined = exports.selectorChartsInteractionYAxis = exports.selectorChartsInteractionXAxisIsDefined = exports.selectorChartsInteractionXAxis = exports.selectorChartsInteractionItemIsDefined = exports.selectorChartsInteractionItem = exports.selectorChartsInteractionIsVoronoiEnabled = exports.selectorChartsInteractionAxis = void 0;
+var _selectors = require("../../utils/selectors");
+const selectInteraction = state => state.interaction;
+const selectorChartsInteractionItem = exports.selectorChartsInteractionItem = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.item);
+const selectorChartsInteractionAxis = exports.selectorChartsInteractionAxis = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.axis);
+const selectorChartsInteractionXAxis = exports.selectorChartsInteractionXAxis = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.axis.x);
+const selectorChartsInteractionYAxis = exports.selectorChartsInteractionYAxis = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.axis.y);
+const selectorChartsInteractionItemIsDefined = exports.selectorChartsInteractionItemIsDefined = (0, _selectors.createSelector)(selectorChartsInteractionItem, item => item !== null);
+const selectorChartsInteractionXAxisIsDefined = exports.selectorChartsInteractionXAxisIsDefined = (0, _selectors.createSelector)(selectorChartsInteractionXAxis, x => x !== null);
+const selectorChartsInteractionYAxisIsDefined = exports.selectorChartsInteractionYAxisIsDefined = (0, _selectors.createSelector)(selectorChartsInteractionYAxis, y => y !== null);
+const selectorChartsInteractionIsVoronoiEnabled = exports.selectorChartsInteractionIsVoronoiEnabled = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.isVoronoiEnabled);

package/node/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/plugins/models/chart.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/plugins/models/helpers.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/plugins/models/index.js

@@ -2,4 +2,37 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
+});
+var _helpers = require("./helpers");
+Object.keys(_helpers).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _helpers[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _helpers[key];
+    }
+  });
+});
+var _plugin = require("./plugin");
+Object.keys(_plugin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _plugin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _plugin[key];
+    }
+  });
+});
+var _chart = require("./chart");
+Object.keys(_chart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _chart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chart[key];
+    }
+  });
 });

package/node/internals/plugins/models/plugin.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/plugins/utils/ChartStore.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartStore = void 0;
-// For now this is fixed. Will need to support generic if we add plugins
-
 class ChartStore {
   constructor(value) {
     this.value = void 0;

package/node/internals/store/useCharts.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartApiInitialization = useChartApiInitialization;
+exports.useCharts = useCharts;
+var React = _interopRequireWildcard(require("react"));
+var _ChartStore = require("../plugins/utils/ChartStore");
+var _corePlugins = require("../plugins/corePlugins");
+function useChartApiInitialization(inputApiRef) {
+  const fallbackPublicApiRef = React.useRef({});
+  if (inputApiRef) {
+    if (inputApiRef.current == null) {
+      // eslint-disable-next-line react-compiler/react-compiler
+      inputApiRef.current = {};
+    }
+    return inputApiRef.current;
+  }
+  return fallbackPublicApiRef.current;
+}
+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 instanceRef = React.useRef({});
+  const instance = instanceRef.current;
+  const publicAPI = useChartApiInitialization(props.apiRef);
+  const innerSvgRef = React.useRef(null);
+  const storeRef = React.useRef(null);
+  if (storeRef.current == null) {
+    // eslint-disable-next-line react-compiler/react-compiler
+    globalId += 1;
+    const initialState = {
+      // TODO remove when the interaction moves to plugin
+      interaction: {
+        item: null,
+        axis: {
+          x: null,
+          y: null
+        }
+      },
+      cacheKey: {
+        id: globalId
+      }
+    };
+    plugins.forEach(plugin => {
+      if (plugin.getInitialState) {
+        Object.assign(initialState, plugin.getInitialState({}));
+      }
+    });
+    storeRef.current = new _ChartStore.ChartStore(initialState);
+  }
+  const runPlugin = plugin => {
+    const pluginResponse = plugin({
+      instance,
+      params: pluginParams,
+      plugins: plugins,
+      store: storeRef.current,
+      svgRef: innerSvgRef
+    });
+    if (pluginResponse.publicAPI) {
+      Object.assign(publicAPI, pluginResponse.publicAPI);
+    }
+    if (pluginResponse.instance) {
+      Object.assign(instance, pluginResponse.instance);
+    }
+  };
+  plugins.forEach(runPlugin);
+  const contextValue = React.useMemo(() => ({
+    store: storeRef.current,
+    publicAPI,
+    instance,
+    svgRef: innerSvgRef
+  }), [instance, publicAPI]);
+  return {
+    contextValue
+  };
+}

package/node/internals/store/useCharts.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/{useStore.js → store/useStore.js}

@@ -1,24 +1,23 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStore = useStore;
-var React = _interopRequireWildcard(require("react"));
-var _InteractionProvider = require("../context/InteractionProvider");
+var _ChartProvider = require("../../context/ChartProvider");
+// This hook should be removed because user and us should not interact with the store directly, but with public/private APIs
 function useStore(skipError) {
-  const charts = React.useContext(_InteractionProvider.ChartsContext);
+  const context = (0, _ChartProvider.useChartContext)();
   if (skipError) {
     // TODO: Remove once store is used by all charts.
     // This line is only for `useAxisEvents` which is in the surface of the Gauge.
     // But the Gauge don't have store yet because it does not need the interaction provider.
     // Will be fixed when every thing move to the store since every component will have access to it.
     // @ts-ignore
-    return charts?.store;
+    return context?.store;
   }
-  if (!charts) {
+  if (!context) {
     throw new Error(['MUI X: Could not find the charts context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }
-  return charts.store;
+  return context.store;
 }

package/package.json

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

package/ChartContainer/ResizableContainer.d.ts

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import type { SizeContextState } from '../context/SizeProvider';
-/**
- * Wrapping div that take the shape of its parent.
- *
- * @ignore - do not document.
- */
-export declare const ResizableContainerRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    ownerState: Partial<Pick<SizeContextState, "width" | "height">>;
-}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
-/**
- * Wrapping div that take the shape of its parent.
- *
- * @ignore - do not document.
- */
-declare function ResizableContainer(props: {
-    children: React.ReactNode;
-}): React.JSX.Element;
-declare namespace ResizableContainer {
-    var propTypes: any;
-}
-export { ResizableContainer };

package/ChartContainer/ResizableContainer.js

@@ -1,60 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import { useSize } from "../context/SizeProvider/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Wrapping div that take the shape of its parent.
- *
- * @ignore - do not document.
- */
-export const ResizableContainerRoot = styled('div', {
-  name: 'MuiResponsiveChart',
-  slot: 'Container'
-})(({
-  ownerState
-}) => ({
-  width: ownerState.width ?? '100%',
-  height: ownerState.height ?? '100%',
-  display: 'flex',
-  position: 'relative',
-  flexGrow: 1,
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'hidden',
-  '&>svg': {
-    width: '100%',
-    height: '100%'
-  }
-}));
-
-/**
- * Wrapping div that take the shape of its parent.
- *
- * @ignore - do not document.
- */
-function ResizableContainer(props) {
-  const {
-    inHeight,
-    inWidth,
-    containerRef
-  } = useSize();
-  return /*#__PURE__*/_jsx(ResizableContainerRoot, _extends({}, props, {
-    ownerState: {
-      width: inWidth,
-      height: inHeight
-    },
-    ref: containerRef,
-    children: props.children
-  }));
-}
-process.env.NODE_ENV !== "production" ? ResizableContainer.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  children: PropTypes.node
-} : void 0;
-export { ResizableContainer };

package/context/InteractionProvider.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { ChartStore } from '../internals/plugins/utils/ChartStore';
-export declare const ChartsContext: React.Context<{
-    store: ChartStore;
-} | null>;
-declare function InteractionProvider(props: React.PropsWithChildren): React.JSX.Element;
-export { InteractionProvider };

package/context/InteractionProvider.js

@@ -1,22 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useCharts } from "../internals/useCharts.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const ChartsContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== 'production') {
-  ChartsContext.displayName = 'ChartsContext';
-}
-function InteractionProvider(props) {
-  const {
-    children
-  } = props;
-  const {
-    contextValue
-  } = useCharts();
-  return /*#__PURE__*/_jsx(ChartsContext.Provider, {
-    value: contextValue,
-    children: children
-  });
-}
-export { InteractionProvider };

package/context/SvgRefProvider/SvgRef.types.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-export interface SvgRefProviderProps {
-    children: React.ReactNode;
-}
-export type SvgRefState = {
-    svgRef: React.Ref<SVGSVGElement>;
-    surfaceRef: React.Ref<SVGSVGElement>;
-};

package/context/SvgRefProvider/SvgRefContext.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { Initializable } from '../context.types';
-import { SvgRefState } from './SvgRef.types';
-export declare const SvgRefContext: React.Context<Initializable<SvgRefState>>;

package/context/SvgRefProvider/SvgRefContext.js

@@ -1,17 +0,0 @@
-'use client';
-
-import * as React from 'react';
-export const SvgRefContext = /*#__PURE__*/React.createContext({
-  isInitialized: false,
-  data: {
-    svgRef: {
-      current: null
-    },
-    surfaceRef: {
-      current: null
-    }
-  }
-});
-if (process.env.NODE_ENV !== 'production') {
-  SvgRefContext.displayName = 'SvgRefContext';
-}

package/context/SvgRefProvider/SvgRefProvider.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import { SvgRefProviderProps } from './SvgRef.types';
-export declare function SvgRefProvider(props: SvgRefProviderProps): React.JSX.Element;

package/context/SvgRefProvider/SvgRefProvider.js

@@ -1,24 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import useForkRef from '@mui/utils/useForkRef';
-import { SvgRefContext } from "./SvgRefContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function SvgRefProvider(props) {
-  const {
-    children
-  } = props;
-  const svgRef = React.useRef(null);
-  const surfaceRef = useForkRef(svgRef);
-  const refValue = React.useMemo(() => ({
-    isInitialized: true,
-    data: {
-      svgRef,
-      surfaceRef
-    }
-  }), [svgRef, surfaceRef]);
-  return /*#__PURE__*/_jsx(SvgRefContext.Provider, {
-    value: refValue,
-    children: children
-  });
-}

package/context/SvgRefProvider/index.d.ts

@@ -1,4 +0,0 @@
-export * from './SvgRef.types';
-export * from './SvgRefProvider';
-export * from './SvgRefContext';
-export * from './useSurfaceRef';

package/context/SvgRefProvider/index.js

@@ -1,4 +0,0 @@
-export * from "./SvgRef.types.js";
-export * from "./SvgRefProvider.js";
-export * from "./SvgRefContext.js";
-export * from "./useSurfaceRef.js";

package/context/SvgRefProvider/useSurfaceRef.d.ts

@@ -1,2 +0,0 @@
-import * as React from 'react';
-export declare function useSurfaceRef(): React.MutableRefObject<SVGSVGElement>;

package/context/SvgRefProvider/useSurfaceRef.js

@@ -1,14 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { SvgRefContext } from "./SvgRefContext.js";
-export function useSurfaceRef() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(SvgRefContext);
-  if (!isInitialized) {
-    throw new Error(['MUI X: Could not find the svg ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
-  }
-  return data.surfaceRef;
-}

package/internals/plugins/utils/ChartsStore.d.ts

@@ -1,12 +0,0 @@
-import type { ChartState } from '../models';
-type Listener<T> = (value: T) => void;
-export type StoreUpdater = (prevState: ChartState) => ChartState;
-export declare class ChartsStore {
-    value: ChartState;
-    private listeners;
-    constructor(value: ChartState);
-    subscribe: (fn: Listener<ChartState>) => () => void;
-    getSnapshot: () => ChartState;
-    update: (updater: StoreUpdater) => void;
-}
-export {};

package/internals/plugins/utils/ChartsStore.js

@@ -1,26 +0,0 @@
-// For now this is fixed. Will need to support generic if we add plugins
-
-export class ChartsStore {
-  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();
-  }
-}

package/internals/useCharts.d.ts

@@ -1,6 +0,0 @@
-import { ChartStore } from './plugins/utils/ChartStore';
-export declare function useCharts(): {
-    contextValue: {
-        store: ChartStore;
-    };
-};